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Web 前 端 工程 入 门 简介 
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随 著 现代 化 网 页 (Modern Web) 开发 专业 和 复杂 性 的 提升 以 及 对 用 户 体验 越 来 越 
高 的 要 求 下 ， 网 页 开发 已 从 过 去 的 Web Develpoer 一 夫 当 关 ， 转 向 专业 分 工 ， 更 
加 细 分 成 网 页 前 端 (Web Front End) 、 网 页 后 端 (Web Back End) 等 职位 。 此 
外 ， 由 于 跨 平台 、 跨 浏览 器 的 需求 日 益 增 加 ， 技 术 变 化 更 迭 快速 ， 市 场 上 对 于 前 端 
工程 是 (Web Front End Engineer) 的 需求 也 与 日 俱 增 ， 前 端 工 程 的 (Front End 
Engineering) 所 要 面 对 的 挑战 也 越 来 越 多 。 


HTML CSS 





前 端 工程 范畴 


事实 上 ， 在 目前 的 业界 ， 前 端 工 程 的 定位 光谱 非常 广泛 ， 有 聚焦 在 网 页 设计 (Web 
Design) ， 也 有 专注 在 软件 工程 (Software Engineering) 的 部 份 ， 本 书 则 是 将 前 
端 工程 定位 在 软件 工程 的 范畴 。 而 HTML ^ CSS 和 JavaScript 是 前 端 工程 最 重要 
的 技术 基础 。 过 去 一 段 时 间 ， gn 但 现 
在 的 Web 平台 ui DEUM 览 器 ， 而 是 必须 面 对 更 多 的 跨 平台 、 跨 浏览 
器 的 应 用 开发 场景 ， 其 中 包含 


.网 页 浏览 器 (Web Browser) ， 一 般 的 网 页 应 用 程序 开发 
2. 通过 CLI 指令 去 操作 的 Headless 浏览 器 (Headless Application) ° 4] 
如 : phantomJS、CasperJS 等 
3. 运作 在 WebView 浏览 器 核心 (WebView Application) 的 应 用 。 例 
如 : Apache Cordova ` Electron ` y TH 动 、 桌 面 应 用 程序 开发 
4. 原生 应 用 程序 (Native Application ) ， 通 过 Web 技术 撰写 原生 应 用 程序 。 


如 : React Native ` Native Script 等 


例 


d 前 端 开 发 就 像 经 历 了 文艺 复兴 (Rinascimento) 的 年 代 ， 开 始 了 各 种 框 

、 套 件 百花 齐 放 的 时 代 。 虽 然 现 在 有 更 多 好 用 工具 可 以 协助 开发 ， 但 前 端 工 程 师 
eae 比较 轻松 。 以 往 若 能 妥善 运用 jQuery 等 函数 库 就 可 以 应 付 大 部 分 
前 端 工程 师 的 工作 ， 但 现在 前 端 招聘 广告 上 不 仅 要 求 精通 HTML ^ CSS 和 
JavaScript， 还 要 对 于 还 要 对 于 Backbone ` Ember ` Angular ` React ` Vue 等 
JavaScript 框架 或 函数 库 有 一 定 程度 的 了 解 。 


在 众多 JavaScript 72% X HAH F > React 是 Facebook 推出 的 开源 JavaScript 
Library， 它 的 出 现 让 许多 革新 性 的 Web 观念 开始 流行 起 来 ， 例 如 : Virtual DOM ` 
Web Component、 更 直觉 的 定义 式 Ul 设计 、 更 优雅 地 实现 Server Rendering 

等 。 接 下 来 本 书 将 通过 介绍 React AA (ecosystem) 带领 读者 入 门 React 的 世 
F o TERA TMM RA S35 FA React 开发 跨 平 台 应 用 程序 。 


(image via bsdacademy ` firebase ) 
‘door: 任意 门 
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React 生态 系 (Ecosystem) 入 门 简介 


Se €. 


根据 React 官方 网 站 的 说 明 : React 是 一 个 专注 于 UI (View) 的 JavaScript 函数 
Æ (Library) ° ÁM Facebook 于 2013 年 开源 React 这 个 函数 库 后 ， 相 关 的 生态 
系 开始 莲 勃 发 展 。 事 实 上 ， 通 过 学 习 React 生态 系 (ecosystem) 的 过 程 中 ， 可 以 
让 我 们 顺便 学 习 现 代 化 Web 开发 的 重要 观念 (例如 : 模块 化 、ES6+、Webpack、 
Babel ` ESLint^ S& APIS) ， 成 为 更 好 的 开发 者 。 


ReactJS 


ReactJS Æ Facebook 推出 的 JavaScript 函数 库 ， 若 以 MVC 框架 来 看 ，React X. 
位 是 在 View 的 范畴 。 在 ReactJS 0.14 版 之 后 ，ReactJS 更 把 原先 处 理 DOM 的 部 
分 独立 出 去 (react-dom) ， 让 ReactJS 核心 更 单纯 ， 也 更 符合 React 所 倡导 的 

Learn once, write everywhere 的 理念 。 事 实 上 ，ReactJS 本 身 的 API 相对 
单纯 ， 但 由 于 整个 生态 系 非常 庞大 ， 因 此 学 习 React 却 是 一 条 漫长 的 道路 。 此 外 ， 
当 你 想 把 React 应 用 在 你 的 应 用 程序 时 ， 你 通常 必须 学 习 整 个 React Stack 才能 充 
分 发 挥 React 的 最 大 优势 。 


JSX 


事实 上 ，JSX 并 非 一 种 全 新 的 语言 ， 而 是 一 种 语法 糖 (Syntatic Sugar) ， 一 种 语 
法 类 似 XML 的 ECMAScript 语法 扩充 。 在 ISX 中 HTML 和 组 建 这 些 元 素 标 签 的 程 
序 码 有 紧密 的 关系 ， 这 和 过 去 我 们 强调 HTML ` JavaScript 分 离 的 观念 有 很 大 不 

同 。 当 然 ， 你 可 以 选择 不 要 在 React 使 用 JSX， 不 过 相信 我 ， 当 你 站 正 开 始 编写 
React 元 件 〈《Component) 时 ， 你 会 很 庆幸 有 ISX ASF ° 


NPM 


NPM (Node Package Manager) 是 Node.js 下 的 主流 包 管 理工 具 。 在 NPM 上 有 
非常 多 的 包 ， 可 以 让 你 不 用 再 重 造 轮子 ， 更 可 以 让 你 可 以 轻松 用 指令 管理 不 同 的 
包 。 由 于 NPM 主要 是 基于 CommonJS 的 规范 ， 通 常 必须 搭配 Browserify 这 样 的 
工具 才能 在 前 端 使 用 NPM 的 模块 。 然 而 因 NPM 是 基于 Nested Dependency 
Tree ， 不 同 的 包 有 可 能 会 在 引入 依赖 时 会 引入 相同 但 不 同 版 本 的 包 ， 造 成 档案 大 小 
过 大 的 情形 。 这 和 另 一 个 包 管 理工 具 Bower 专注 在 前 端 包 且 使 用 Flat Dependency 
Tree (让 使 用 者 决定 相依 的 包 版 本 ) 是 比较 不 同 的 地 方 。 


ES6+ 


ES6+ 系 指 ES6 (ES2015) 和 ES7 RE > Æ ES6+ 新 的 标准 当中 引入 许多 新 的 
特性 和 功能 ， 弥 补 了 过 去 JavaScript 被 诉 病 的 一 些 特性 。 由 于 未 来 React 将 以 支持 
ES6+ 为 主 ， 因 此 直接 学 习 ES6+ 用 法 是 相对 好 的 选择 ， 本 书 的 所 有 范例 也 将 会 以 
ES6+ 编写 。 


Babel 


由 于 并 非 所 有 浏览 器 都 支持 ES6+ 语法 ， 所 以 通过 Babel 这 个 JavaScript 编译 器 

(可 以 想 成 是 翻译 机 ) 可 以 让 你 的 ES6+ ^ JSX 等 程序 码 转 换 成 浏览 器 可 以 看 的 懂 
得 语法 。 通 常会 在 数据 夹 的 root 位 置 加 入 .babelrc 进行 转译 规则 preset 和 
引用 外 挂 (plugin) 的 设 定 。 


JavaScript 模块 化 开发 


随 著 Web 应 用 程序 的 复杂 性 提高 ，JavaScript 模块 化 开发 已 经 成 为 必然 的 趋势 ， 
以 下 简单 介绍 JavaScript 模块 化 的 相关 规范 。 事 实 上 ， 在 一 开始 没有 官方 定义 的 标 
准时 出 现 了 各 种 社 群 自行 定义 的 规范 和 实践 。 


1. CDN-Based 


也 就 是 最 传统 的 <script> 引入 方式 ， 然 而 使 用 这 种 方式 虽然 简单 方便 ， 但 
在 开发 实际 中 大 型 应 用 程序 时 会 产生 许多 头 端 : 


o 全 局 作用 域 容易 造成 变数 污染 和 冲突 


o 文件 只 能 依照 «script» 顺序 载 入 ， 不 具 弹 性 

o 在 大 型 专案 中 各 种 资源 和 版 本 难以 维护 

o LA RA E] ATF Bt ARR Fo HR EZ T8] 85 RH KA 
. AMD 


Asynchronous Module Definition 简称 AMD ， 为 非 同步 载 入 模块 的 规范 ， 其 在 
定义 时 模块 时 即 需 定义 依赖 的 模块 。AMD 常用 于 浏览 器 端 ， 其 最 著名 的 实践 
为 RequireJS 


基本 格式 : 


define(id?, dependencies?, factory); 


. CommonJS 


CommonJS 规范 是 一 种 同步 模块 载 入 的 规范 。 以 Node.js 其 遵守 CommonJS 
规范 ， 使 用 require 3t 4p EOX TP AX c ERE 

exports ^ module.exports 来 输出 模块 。 主 要 实现 为 Node.js 服务 器 端 
的 同步 载 入 和 浏览 器 端的 Browserify ° 


. CMD 


CMD 全 称 为 Common Module Definition， 其 规范 和 AMD 类 似 ， 但 相对 简 
洁 ， 却 又 保持 和 CommonJS 的 兼容 性 。 其 最 大 特色 为 : 依赖 就 近 ， 延 迟 执 
行 。 主 要 实现 为 : Sea.js。 


. UMD 


Universal Module Definition 是 为 了 要 兼容 CommonJS 和 AMD 所 设计 的 规 
范 ， 和 希望 让 模块 能 跨 平 台 执 行 。 


. ES6 Module 


ECMAScript6 的 标准 中 定义 了 JavaScript 的 模块 化 方式 ， 让 JavaScript 在 开 
发 大 型 复杂 应 用 程序 时 上 更 为 方便 且 易 于 管理 ， 亦 可 以 取代 过 去 AMD ` 
CommonJS 等 规范 ， 成 为 通用 于 浏览 器 端 和 服务 器 端的 模块 化 解决 方案 。 但 
目前 浏览 器 和 Node 在 ES6 模块 支持 度 还 不 完整 ， 大 部 分 情况 需要 通过 Babel 
转译 器 进行 转译 。 


Webpack/Browserify + Gulp 


随 著 网 页 应 用 程序 开发 的 复杂 性 提升 ， 现 在 的 网 页 往往 不 单 只 是 单纯 的 网 页 ， 而 是 
一 个 网 页 应 用 程序 (WebApp) 。 为 了 管理 复杂 的 应 用 程序 开发 ， 此 时 模块 化 开发 
方法 便 显 得 日 益 重 要 ， 而 理想 上 的 模块 化 开发 工具 一 直 是 前 端 工程 的 很 大 的 议题 。 
Webpack 和 Browserify + Gulp 则 是 进行 React 应 用 程序 开发 常用 的 开发 工具 ， 可 
以 协助 进行 自动 化 程序 码 打包 、 转 译 等 重复 性 工作 ， 提 升 开发 效率 。 本 书 范例 主要 
会 搭配 Webpack 进行 开发 。 


1. Webpack 


Webpack 是 一 个 模块 打包 工具 (module bundler) ， 以 下 列 出 Webpack 44) JL 
项 主要 功能 : 


o 将 CSS、 图 片 与 其 他 资源 打包 
o 打包 之 前 预 处 理 (Less、CoffeeScript、JSX、ES6 等 ) 的 档案 
o 依 entry 文件 不 同 ， 把 .js 分 拆 为 多 个 js 档案 
o 整合 丰富 Loader 可 以 使 用 ee 本 身 仅 能 处 理 JavaScript 模块 ， 
其 余 档 案 如 : CSS、Image 需要 载 入 不 同 Loader 进行 处 理 ) 
2. Browserify 


如 同 官网 上 说 明 的 : Browserify lets you require('modules') in the 
browser by bundling up all of your dependencies. ^ Browserify 是 一 
个 可 以 让 你 在 浏览 器 端 也 能 使 用 像 Node 用 的 CommonJS 规范 一 样 ， 用 输出 
(export) 和 引用 (require) 来 管理 模块 。 此 外 ， 也 能 让 前 端 使 用 许多 在 NPM 
中 的 模块 。 


3. Gulp 


Gulp 是 一 个 前 端 任务 工具 自动 化 管理 工具 (Task Runner) 。 随 著 前 端 工程 
的 发 展 ， 我 们 在 开发 前 端 应 用 程序 时 有 许多 工作 是 必须 重复 进行 ， 例 如 : 打包 
文件 、uglify、 将 LESS 转译 成 一 般 的 CSS 的 档案 ， 转 译 ES6 语法 等 工作 。 
若是 acd 一 般 手 动 的 方式 ， 往 往 会 造成 效率 的 低下 ， 所 以 通过 像 是 Grunt、 
Gulp 这 类 的 Task Runner 不 但 可 以 提升 效率 ， 也 可 以 更 方便 管理 这 些 任务 。 
由 于 Gulp 是 通过 pipeline 方式 来 处 理 档案 ， 在 使 用 上 比 起 Grunt 的 方式 直观 
许多 ， 所 以 这 边 我 们 主要 讨论 的 是 Gulp 。 


ESLint 


ESLint 是 一 个 提供 JavaScript 和 JSX 的 程序 码 检 查 工 具 ， 可 以 确保 团队 的 程序 
品质 。 其 支持 可 插 拔 的 特性 ， 可 以 根据 需求 在 .eslintrc 设 定 检查 规则 。 目 前 

主流 的 检查 规则 会 使 用 Airbnb 所 发 布 的 Airbnb React/JSX Style Guide， 在 使 用 上 
需 先 安装 eslint-config-airbnb 等 包 


React Router 


React Router 是 React 中 主流 使 用 的 Routing RAE > it URL 的 变化 来 管理 对 
应 的 状态 和 元 件 。 若 开发 不 书页 的 单 页 式 (single page imd 的 React 应 用 
程序 通常 都 会 需要 用 到 。 


Flux/Redux 


Flux 是 一 个 实现 单项 流 的 应 用 程序 数据 架构 (architecture) ， 同 样 是 由 Facebook 
推出 ， 并 和 React 专注 于 View 的 部 份 形成 互补 。 而 由 Dan Abramov 所 开发 的 
Redux 被 React 开发 社 群 认为 是 Flux-like 更 优雅 的 作法 ， 也 是 目前 主流 搭配 
React 的 状态 (State) 管理 工具 。 让 你 在 开发 复杂 的 应 用 程序 时 可 以 更 方便 管理 你 
的 状态 (state) 。 


ImmutableJS 


ImmutableJS， 是 一 个 能 让 开发 者 建立 不 可 变数 据 结 构 的 函数 库 。 建 立 不 可 变 
(immutable) 数据 结构 不 仅 可 以 让 状态 可 预测 性 更 高 ， 也 可 以 提升 程序 的 性 能 。 


Isomorphic JavaScript 


Isomorphic JavaScript 是 指 前 后 端 (Client/Server) 共用 相同 部 分 的 程序 je 让 
JavaScript 应 用 可 以 同时 执行 在 浏览 器 端 和 服务 器 端 ， 在 React 中 可 以 通过 服务 器 
378 (server side rendering) 静态 HTML 的 方式 达到 Isomorphic JavaScript 效 
果 ， 让 SEO 和 执行 性 能 更 加 提升 并 让 前 后 端 共 用 程序 码 。 而 另 一 个 常 一 起 出 现 的 
Universal JavaScript 一 般 定义 更 为 广泛 ， 系 指 可 以 运行 在 不 同 环境 下 的 JavaScript 
Code， 并 不 局 限于 浏览 器 和 服务 器 端 。 但 要 留意 的 是 在 Github 和 许多 技术 文章 的 
分 享 上 会 把 两 者 定义 为 同一 件 事情 


React 测试 


Facebook 本 身 有 提供 Test Utilities， 但 由 于 不 够 好 用 ， 所 以 目前 主流 开发 社 群 比较 
倾向 使 用 Airbnb 团队 开发 的 enzyme， 其 可 以 与 市 面 上 常见 的 测试 工具 

(Mocha ` Karma ` Jest 等 ) 搭配 使 用 。 其 中 Jest 是 Facebook 所 开发 的 单元 测试 
工具 ， 其 主要 基于 Jasmine 所 建立 的 测试 框架 。Jest 除了 支持 JSDOM 外 ， 也 可 
以 自动 模拟 (mock) 通过 require() 进来 的 模块 ， 让 开发 者 可 以 更 专注 在 目前 被 
测试 的 模块 中 。 


React Native 


React Native 和 过 去 的 Apache Cordova 等 基于 WebView 的 解决 方案 比较 不 同 ， 
它 让 开发 者 可 以 使 用 React 和 JavaScript 开发 原生 应 用 程序 (Native App) * ik 


Learn once, write anywhere 理想 变 得 可 能 。 


GraphQL/Relay 


GraphQL X Facebook 所 开发 的 数据 查询 语言 (Data Query Language) ， 主 要 是 
想 解决 传统 RESTful API 所 遇 到 的 一 些 问 题 ， 并 提供 前 端 更 有 弹性 的 API 设计 方 
A ° Relay 则 是 Facebook 提出 搭配 GraphQL 用 于 React 的 一 个 定义 式 数 据 框 

架 ， 可 以 降低 Ajax 的 请 求 数量 (类 似 的 框架 还 有 Netflix 推出 的 Falcor) 。 但 由 于 
目前 主流 的 后 端 API 仍 以 传统 RESTful API 设计 为 主 ， 所 以 在 使 用 GraphQL 上 通 
常会 需要 比较 大 架构 设计 的 变动 。 因 此 本 书 则 是 把 GraphQL/Relay 介绍 放 到 附录 
的 部 份 ， 让 有 兴趣 的 读者 可 以 自行 参考 体验 一 下 。 
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以 上 就 是 读者 在 React 生态 系 游 走时 会 遇 到 的 各 种 关卡 ， 也 许 有 些 初 学 者 会 对 于 这 
样 庞大 的 体系 所 吓 到 ， 放 弃 学 习 React 这 项 革新 性 技术 的 机 会 。 不 过 别 担心 ， 接 下 
来 笔者 将 带领 读者 按 图 索 双 ， 依 序 介绍 整个 React 生态 系 的 各 种 技术 ， 一 步 步 带领 


延伸 阅读 


React EA AAT fai 7 


. Navigating the React.JS Ecosystem 

. petehunt/react-howto 

. React Ecosystem - A summary 

. React Official Site 

. Acollection of awesome things regarding React ecosystem 
. Webpack 中 文 指南 

. AMD 和 CMD 的 区 别 有 哪 些 ? 

. jslint to eslint 

. Facebook#)Web# = tk # : React.js、Relay 和 GraphQL 
. airbnb/javascript 


O O ON DOA BP WD > 


一 人 


(image via jpsierens ) 


‘door: 任意 门 


| 回首 页 | 上 一 章 : Web 前 端 工程 入 门 简介 | 下 一 章 : React 开发 环境 设置 与 
Webpack 入 门 教学 | 


| 纠 错 、 提 问 或 许愿 | 
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Ch02 React 开发 环境 设置 与 Webpack AT] 
1. React 开发 环境 设置 与 Webpack AT] 
‘door: 4£ ET] 


| 回首 页 | 


React 开发 环境 设置 与 Webpack 入 门 教学 





俗话 说 工 欲 善 其 事 ， 必 先 利 其 器 。 写 程式 也 是 一 样 ， 搭 建 好 开发 环境 后 可 以 让 自己 
在 后 续 开 发 上 更 加 顺利 。 因 此 本 章 接 下 来 将 讨论 React 开发 环境 的 两 种 主要 方式 : 
CDN-based ` webpack (这 边 我 们 就 先 不 讨论 TypeScript 的 开发 方式 ) 。 至 于 
browserify 搭配 Gulp 的 方法 则 会 放 在 补充 资料 中 ， 让 读者 阅读 完 本 章 后 可 以 开始 
React 开发 之 旅 ! 


JavaScript 模块 化 


随 著 网 站 开发 的 复杂 度 提升 ， 许 多 现代 化 的 网 站 已 不 是 单纯 的 网 站 而 已 ， 更 像 是 个 
富有 互动 性 的 网 页 应 用 程式 (Web App) 。 为 了 应 付 现代 化 网 页 应 用 程式 开发 的 需 
求 ， 解 决 一 量 污染 、 低 维护 性 等 问题 ，JavaScript 在 模块 化 上 也 有 长 
足 的 发 展 。 过 去 一 段 时 间 读 者 们 或 许 听 过 像 是 

Webpack ^ Browserify ^ module 

bundlers ^ AMD ^ CommonJS ^ UMD ^ ES6 Module 等 有 关 JavaScript 模块 
化 开发 的 专 有 名 词 或 工具 ， 在 前 面 一 个 章节 我 们 也 简单 介绍 了 关于 JavaScript 模块 
化 的 简单 观念 和 规范 介绍 。 若 是 读者 对 于 JavaScript 模块 化 开发 尚 不 熟悉 的 话 推荐 
可 以 参考 这 篇 文章 和 这 篇 文章 当 作 入 门 。 


总 的 来 说 ， 使 用 模块 化 开发 JavaScript 应 用 程式 主要 有 以 下 三 种 好 处 : 


1. 提升 维护 性 (Maintainability ) 


命名 空间 (Namespacing ) 
3. 提供 可 重用 性 (Reusability) 


而 在 React 应 用 程式 开发 上 更 推荐 使 用 像 是 Webpack 这 样 的 module 
bundlers 来 组 织 我 们 的 应 用 程式 ， 但 对 于 一 般 读者 来 说 Webpack 强大 而 完整 
的 功能 相对 复杂 。 为 了 让 读者 先 熟悉 React 核心 观念 (我 们 假设 读者 已 经 有 使 用 
JavaScript 或 jQuery 的 基本 经 验 ) ， 我 们 将 从 使 用 CDN 引入 «script» 
的 方式 开始 介绍 : 


使 用 CDN-based 的 开发 方式 缺点 是 较 难 维护 我 们 的 程式 码 ( 当 引 入 遂 式 库 一 多 就 
会 有 很 多 <script/> ) 且 会 容易 遇 到 版 本 相 容 性 问题 ， 不 太 适 合 开 发 大 型 应 用 程 
式 ， 但 因为 简单 易 懂 ， 适 合 教学 上 使 用 。 


ee x 


以 下 是 React 官方 首页 的 范例 ， 以 下 使 用 React vi5.2.1 


1. 理解 React 是 Component 导向 的 应 用 程式 设计 

2. 引入 react.js ^ react-dom.js (react 0.14 后 将 react-dom 从 react 核 
心 分 离 ， 更 符合 react 跨 平 台 抽象 化 的 定位 ) 以 及 babel-standalone 版 
script (可 以 想 成 babel 是 翻译 机 ， 翻 译 浏览 器 看 不 懂 的 JSX 或 ES6+ 
语法 成 为 浏览 RU IAS] JavaScript 。 为 了 提升 效率 ， 通 常 我 们 都 会 在 
伺服 器 端 做 转译 ， 这 点 在 production 环境 尤为 重要 ) 

3. 在 <body> 编写 React Component 246% (mount) 指定 节点 的 地 
方 : <div id="example"></div> 

4. 通过 babel 进行 语言 翻译 React JSX 语法 ， babel 会 将 其 转 为 浏览 器 
看 的 懂得 JavaScript 。 其 代表 意义 是 : ReactDOM.render( 想 要 render 
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的 Component 或 HTML 元 素 ， 想 要 插入 的 位 置 ) 。 所 以 我 们 可 以 在 浏览 器 上 打 
开 我 们 的 hello.html ， 就 可 以 看 到 Hello, world! ° That's it， 我 们 第 
一 个 React 应 用 程式 就 算 完成 了 ! 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset="UTF-8" /» 
<title>Hello React!</title> 
<!-- 以 下 引入 react.js, react-dom.js (react 0.14 后 将 react-do 
m 从 react 核心 分 离 ， 更 符合 react 跨 平台 抽象 化 的 定位 ) 以 及 babel-core b 
rowser 版 --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15 
2 .1/ reach. min. JS =</ SCript> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15 
.2.1/react-dom.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-st 
andalone/6.18.1/babel.min.js"></script> 
</head> 
<body> 
<!-- 这 边 的 id="example" 的 «div» 为 React Component 要 插入 的 地 
TESI 
«div oe tee 
«1-- 以 下 就 是 包 在 babel (通过 进行 语言 翻译 ) 中 的 React JSX 语法 ，bab 
el 会 将 其 转 为 浏览 器 看 的 懂得 JavaScript --> 
<script type="text/babel"> 
ReactDOM. render ( 
document .getElementById('example' ) 
); 
</script> 
</body> 
</html> 
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Hello, world! 





modules webpack static 
with dependencies MODULE BUNDLER assets 


上 面 我 们 先 简单 介绍 了 CDN-based 的 开发 方式 让 大 家 先 对 于 React 有 个 基本 印 
象 ， 但 由 于 CDN-based 的 开发 方式 有 不 少 缺 点 。 所 以 接 下 来 的 Webpack 将 会 是 
我 们 接 下 来 范例 的 主要 使 用 的 开发 工具 。 

Webpack 是 一 个 模块 打包 工具 (module bundler) ， 以 下 列 出 Webpack 的 几 项 主 
要 功能 : 


e 将 CSS、 图 片 与 其 他 资源 打包 
e 打包 之 前 预 处 理 (Less、CoffeeScript、JSX、ES6 等 ) 档案 
e 依 entry 文件 不 同 ， 把 js 分 拆 为 多 个 .js 档案 


e 整合 丰富 的 Loader 可 以 使 用 (Webpack 本 身 仅 能 处 理 JavaScript 模块 ， 其 余 


合 
档案 如 : CSS ` Image 需要 载 入 不 同 Loader 进行 处 理 ) 


接 下 来 我 们 一 样 通过 Hello World 实例 来 介绍 如 何 用 Webpack 设置 React 开发 环 


境 : 
1. 依据 你 的 操作 系统 安装 Node fe NPM (目前 版 本 的 Node 都 会 内 建 NPM) 


2. 通过 NPM 安装 Webpack (可 以 global X local project 安装 ， 这 边 我 们 使 用 
local) 、webpack loader、webpack-dev-server 


Webpack 中 的 loader 类 似 于 browserify 内 的 transforms， 但 Webpack 在 使 
用 上 比较 多 元 ， 除 了 JavaScript loader 外 也 有 CSS Style 和 图 片 的 loader 
此 外 ， webpack-dev-server 则 可 以 启动 开发 用 server， 方 便 我 们 测试 


// 按 指示 初始 化 NPM 设 定 档 package.json 

$ npm init 

// --save-dev 是 可 以 让 你 将 安装 套件 的 名 称 和 版 本 资讯 存放 到 package. j 
Son， 方 便 日 后 使 用 

$ npm install --save-dev babel-core babel-eslint babel-load 
er babel-preset-es2015 babel-preset-react html-webpack-plugi 
n webpack webpack-dev-server 


3. 在 根 目录 设 定 webpack.config.js 


事实 上 ， webpack.config.js 有 点 类 似 于 gulp 中 的 gulpfile.js 7 
用 ， 主 要 是 设 定 webpack 的 相关 设 定 
// 这 边 使 用 HtmlWebpackPlugin’ # bundle 好 的 «script» 插入 到 b 
ody ° ${_ dirname} 为 ES6 语法 对 应 到 — dirname 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 


const HTMLWebpackPluginConfig = new HtmlwWebpackPlugin({ 
template: '$( dirnamej/app/index.html', 
filename: 'index.html', 
inject: 'body', 

3); 


module.exports - ( 


lb 2 tp lA k l] 村 HE S A bh E RE Sal ery aye Z 
// fh RR AM entr y BA? AA IEA BDYASS v] YA 4 
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entry: [ 
"A/apd/index.jJs', 
]， 
// output 是 放 入 产生 出 来 的 结果 的 相关 参数 
output: { 


path: ^$(. dirnamej)/dist' , 
filename: 'index bundle.js', 
ty 
module: { 

// loaders 则 是 放 想 要 使 用 的 loaders， 在 这 边 是 使 用 babel-lo 
ader 将 所 有 ,js (这 边 用 到 正则 ) 相关 文件 (排除 了 npm 安装 的 套件 位 置 no 
de modules) 编译 成 浏览 器 可 以 阅读 的 JavaScript» preset 则 是 使 用 的 b 
abel 编译 规则 ， 这 边 使 用 react、es2015。 若 是 已 经 单独 使 用 ,babelrc 作 
A presets 设 定 的 话 ， 则 可 以 省 略 query 

loaders: [ 
{ 
test: /\.)SS/, 
exclude: /node_modules/, 
loader: 'babel-loader', 
query: ( 
presets: ['es2015', 'react'], 
ty 
tr 
], 
ty 
// devServer 则 是 webpack-dev-server 设 定 
devServer: { 
inline: true, 
port: 8008, 
i 
// plugins 放置 所 使 用 的 外 挂 
plugins: [HTMLWebpackPluginConfig], 
3 


4. 在 根 目 录 设 定 .babelrc 
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"presets": [ 
"es2015", 
react 


i 
pluga msa 


Bo ae 


. 安装 react 和 react-dom 


$ npm install --save react react-dom 


. 编写 Component (记得 把 index.html 以 及 index.js 放 到 app 文件 
RATE!) 


index.html 


<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 

<title>React Setup</title> 

<link rel="stylesheet" type="text/css" href="//maxcdn. b 
ootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
</head> 


<body> 
<!-- 想 要 插入 React Component 的 位 置 --> 
<div id="app"></div> 

</body> 

</html> 


index.js 


import React from 'react'; 
import ReactDOM from 'react-dom'; 


class App extends React.Component { 
constructor(props) { 
super(props); 
this.state = { 
}; 
} 
render() { 
return ( 
<div> 
<hi>Hello, World!</h1> 
</div> 


); 


ReactDOM.render(<App /», document.getElementById('app')); 


7. 在 终端 机 使 用 webpack 进行 成 果 展 示 ，webpack 相关 指令 : 


o Webpack : 会 在 开发 模式 下 开始 一 次 性 的 建 置 

o Webpack -p : 会 建 置 production 的 程式 码 

o webpack --watch : 会 监听 程式 码 的 修改 ， 当 储存 时 有 开动 时 会 更 新 档案 
o Webpack -d : 加 入 source maps 档案 

o webpack --progress --colors : 加 上 处 理 进度 与 颜色 


如 果 不 想 每 次 都 打 一 长 串 的 指令 码 的 话 可 以 使 用 package.json 中 的 


scripts 设 定 
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"dev": "webpack-dev-server --devtool eval --progress --co 
lors --content-base build" 


$ npm run dev 


当 我 们 此 时 我 们 可 以 打开 浏览 器 输入 http://localhost:8008 ， 就 可 以 看 到 
Hello, world! Ff! 
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以 上 就 是 React 开发 环境 设置 与 Webpack 入 门 教学 ， 看 到 这 边 的 读者 不 妨 自 己 动 
手 设 定 开发 环境 ， 体 验 一 下 React 开发 环境 的 感觉 ， 毕 竞 若 是 只 有 阅读 文字 的 话 很 
BARS BEIGE ! 若 你 不 想 在 环境 设 定 上 花 太 多 时 间 的 话 ， 不 妨 参 考 Facebook 开 
发 社区 推出 的 create-react-app， 可 以 快速 上 手 ， 使 用 Webpack、Babel、ESLint 

开发 React 应 用 程式 。 接 下 来 的 章节 我 们 将 持续 延伸 React/JSX/Component 的 介 


绍 。 


延伸 阅读 


. JavaScript 模块 化 七 日 谈 

.前 端 模 块 化 开发 那 点 历史 

. Webpack 中 文 指南 

. WEBPACK DEV SERVER 
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‘door: 任意 门 


| 回首 页 | 上 一 章 : React 生态 系 (Ecosystem) 入 门 简介 | 下 一 章 : ReactJS 5 
Component 设计 入 门 介绍 | 


| 纠 错 、 提 问 或 许愿 | 
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1. ReactUS 4 Component 入 门 介绍 
2. JSX 简明 入 门 教学 指南 
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在 上 一 个 章节 中 我 们 快速 学 习 了 React 开发 环境 建 置 和 Webpack 入 门 。 接 下 来 我 
们 将 更 进一步 了 解 React 和 Component 设计 时 需 注意 的 几 个 重要 特性 。 


ReactJS 特性 简介 


React 原本 是 Facebook 自己 内 部 使 用 的 开发 工具 ， 但 却 是 一 个 目标 远大 的 一 个 项 
A : Learn once, write anywhere 。 自 从 2013 年 开源 后 周边 的 生态 系 更 是 送 
PAK ° ReactJS 的 出 现 让 前 端 开 发 有 许多 间 新 性 的 思维 出 现 ， 其 中 有 几 个 重要 特 
性 值得 我 们 去 探讨 : 


1. 基于 组 件 (Component) 化 思 

2. 用 JSX 进行 声明 式 (Declarative) UI 设计 

3. 使 用 Virtual DOM 

4. Component PropType 错误 校对 机 制 

5. Component 就 像 个 状态 机 (State Machine) ， 而 且 也 有 生命 周期 (Life 
Cycle ) 

6. 一 律 重 绘 (Always Redraw) 和 单 向 数据 流 (Unidirectional Data Flow ) 

7. 在 JavaScript € € CSS : Inline Style 


基于 组 件 (Component) 化 思 


Daant IC A Rramnnnoan} 
ReactUS 与 Component 2 


«Network /» 


«Predictions /» 


<DepartureBoard /> 


pm | 


<DepartureBoard /> 


E 一 


在 React 的 世界 中 最 基本 的 单元 为 组 件 (Component) ， 每 个 组 件 也 可 以 包含 一 个 
以 上 的 子 组 件 ， 并 依照 需求 组 装 成 一 个 组 合式 的 (Composable) 组 件 ， 因 此 具有 
封装 (encapsulation) 、 关 注 点 分 离 (Separation of Concerns)、 复 用 (Reuse) ^ 
组 合 (Compose) 等 特性 。 





<TodoApp> 组 件 可 以 包含 <TodoHeader /> ^ <TodoList /> 子 组 件 


<div> 
<TodoHeader /> 
<TodoList /> 
</div> 


«TodoList /> 组 件 内 部 长 相 : 


CD 
) 


<div> 
<ul> 
<1i> 写 程式 码 </1i> 
<]i> 哄 妹子 </1i> 
<1i> 买 书 </1i> 
</ul> 
</div> 


组 件 化 一 直 是 网 页 前 端 开发 的 万 金 油 ， 许 多 开发 者 最 希望 的 就 是 可 以 最 大 化 重复 使 
用 (reuse) 过 去 所 写 的 程式 码 ， 不 要 重复 造 轮子 (DRY) 。 在 React 中 组 件 是 一 
切 的 基础 ， 让 开发 应 用 程式 就 好 像 在 堆积 木 一 样 。 然 而 对 于 过 去 习惯 模版 式 
(template) 开发 的 前 端 工程 师 来 说 ， 短 时 间 要 转换 成 组 件 化 思考 模式 并 不 容易 ， 
尤其 过 去 我 们 往往 习惯 于 将 HTML ^ CSS 和 JavaScript 分 离 ， 现 在 却 要 把 它们 都 
封装 在 一 起 。 


一 个 比较 好 的 方式 就 是 训练 自己 看 到 不 同 的 网 页 或 应 用 程式 时 ， 强 迫 自 己 将 看 到 的 


页 面 切 成 一 个 个 组 件 。 相 信 过 了 一 段 时 间 后 ， 天 眼 开 了 ， 就 比较 容易 习惯 组 件 化 的 
思考 方式 d 
以 下 是 一 般 React Component 撰写 的 主要 两 种 方式 : 


1. 使 用 ES6 的 Class (可 以 进行 比较 复杂 的 操作 和 组 件 生命 周期 的 控制 ， 相 对 于 
stateless components 耗费 资源 ) 


/ / ZEAE 3T 3k 第 一 个 F Z EE Ap BK E 5 
class A extends React.Component { 
// render € Class based 组 件 唯一 必须 的 方法 (method) 
render() ( 
return ( 
<div>Hello, World!</div> 


yy 


m du 2 


// 将 «MyComponent /> 组 件 插入 id A app 的 DOM t%# 
ReactDOM.render(«MyComponent/», document.getElementById('ap 


p')); 


<<<<<<< HEAD 


1. 使 用 Funtional Component 写法 (单纯 地 render UI 的 stateless 
components， 没 有 内 部 状态 、 eee ref， 没 有 生命 周期 函数 。 若 非 
需要 控制 生命 周期 的 话 建议 多 使 用 stateless components 获得 比较 好 的 性 能 ) 


"javascript 


1// 使 用 arror function 来 设计 Funtional 
Component 让 Ul 设计 更 单纯 (f(D) => 
Ul) ， 减 少 副作用 (side effect) 


2. 使 用 Functional Component 写法 (单纯 地 render UI 的 stateless 
2 ， 没有 内 部 状态 、 没 有 实 作 物件 和 ref， 没 有 生命 明 期 函数 。 若 非 
需要 控制 生命 ;过期 的 话 建议 乡 使 用 stateless components J£ 4t r63& 45 55 3k fie ) 


Pœ) => U 少 副 作用 (side effect 
>>>>>>> kdchang/master 
const MyComponent = () => ( 
<div>Hello, World!</div> 
); 


1 <My yComponent /> 组 件 插 入 id J ipp HY DOM AT 
ReactDOM. n EH document.getElementById('ap 
p')); 


用 JSX 进行 声明 式 (Declarative ) UI 设计 


React 在 设计 上 的 思路 认为 使 用 Component 比 起 模版 (Template) 和 显示 逻辑 
(Display Logic) 更 能 实现 关注 点 分 离 的 概念 ， 而 搭配 ISX 可 以 实现 声明 式 
Declarative (注重 What to) ， 而 非 命令 式 Imperative (注重 how to) 的 程式 撰写 


像 下 述 的 声明 式 (Declarative) UI 设计 就 比 单纯 用 (Template) AN AAL AY 


ee fea] sce yah sp ae ia es c EE 22x T SIDES AES ECTS £ ] > 了 了 JA. bn P AA TA AL 
// S APH (Declarative) UI Tik z "] AA i ax "|- ZB er Dy AE 


«MailForm /» 


// «MailForm /> 内 部 长 相 
«form» 
<input type="text" name="email"> 
«button type="sSubmit"></button> 
</form> 


由 于 JSX # React 组 件 撰写 上 扮演 很 重要 的 角色 ， 因 此 在 下 一 个 章节 我 们 也 将 更 
深入 讲解 ISX 使 用 细节 。 


使 用 Virtual DOM 

在 传统 Web 中 一 般 是 使 用 jQuery 进行 DOM 的 直接 操作 。 然 而 更 改 DOM 往往 是 
Web 性 能 的 瓶颈 ， 因 此 在 React 世界 设计 有 Virtual DOM 的 机 制 ， 让 App 和 
DOM 之 间 用 Virtual DOM 进行 沟通 。 当 更 改 DOM 时 ， 会 通过 React 自身 的 diff 
演算 法 去 计算 出 最 小 更 新 ， 进 而 去 最 小 化 更 新 扶 实 的 DOM? 

Component PropType 错误 校对 机 制 


在 React 设计 时 除了 提供 props 预 设 值 设 定 (Default Prop Values) 外 ， 也 提供 了 
Prop 的 验证 (Validation) 机 制 ， 让 整个 Component 设计 更 加 稳健 : 


class MyComponent extends React.Component { 
render Class based m 
render() 1 
return ( 
<div>Hello, World!</div> 


); 


PropTypes JsuE > 427A prog 
MyComponent.propTypes = { 

todo: React.PropTypes.object, 

name: React.PropTypes.string, 


} 


MyComponent.defaultProps = { 
todo: {}, 


name: ; 


j 


关于 更 多 的 Validation 用 法 可 以 参考 官方 网 站 的 说 明 。 


Component 就 像 个 状态 机 (State Machine) ， 而 
且 也 有 生命 周期 (Life Cycle ) 


Component 就 像 个 状态 机 (State Machine) ， 根 据 不 同 的 state (通过 
setState() 修改 ) 和 props (由 父 元 素 传 入 ) > Component 会 出 现 对 应 的 显示 
结果 。 而 人 有 生老病死 ， 组件 也 有 生命 周期 。 通 过 操作 生命 周期 处 理 函 数 ， 可 以 在 
对 应 的 时 间 点 进行 Component 需要 的 处 理 ， 关 于 更 详细 的 组 件 生命 周期 介绍 我 们 
会 再 下 一 个 章节 进行 更 一 步 说 明 。 


一 律 重 绘 (Always Redraw) 和 单 向 数据 流 
(Unidirectional Data Flow) 


在 React 世界 中 ，props 和 state 是 影响 React Component 长 相 的 重要 要 素 。 其 中 
props 都 是 由 父 元 素 所 传 进来 ， 不 能 更 改 ， 若 要 更 改 props 则 必须 由 父 元 素 进行 更 
改 。 而 state 则 是 根据 使 用 者 互动 而 产生 的 不 同 状 态 ， 主 要 是 通过 setState() 方法 
进行 修改 。 当 React 发 现 props 或 是 state 更 新 时 ， 就 会 重 绘 整个 UIl。 当 然 你 也 可 
以 使 用 forceUpdate() 去 强迫 重 绘 Component » * React 通过 整合 Flux A Flux- 
like (例如 : Redux) 可 以 更 具体 实现 单 向 数据 流 (Unidirectional Data Flow) > ik 
数据 流 的 管理 更 为 清晰 。 


在 JavaScript € 5 CSS : Inline Style 


在 React Component 中 CSS 使 用 Inline Style 写法 ， 全 都 封装 在 JavaScript 4 
中 : 


const divStyle = { 
color: 'red', 
backgroundImage: 'url(' + imgUrl + ')', 


Ps 


ReactDOM. render (<div style={divStyle}>Hello World!</div>, docume 
nt.getElementById('app')); 


e 


Cx 


/ 


以 上 介绍 了 ReactJS 的 几 个 重要 特性 : 


1. 基于 组 件 (Component) 化 思 

2. 用 JSX 进行 声明 式 (Declarative) Ul 设计 

3. 使 用 Virtual DOM 

4. Component PropType 错误 校对 机 制 

5. Component 就 像 个 状态 机 (State Machine) ， 而 且 也 有 生命 周期 (Life 
Cycle) 

6. 一 律 重 绘 (Always Redraw) 和 单 向 数据 流 (Unidirectional Data Flow) 

7. 在 JavaScript € € CSS : Inline Style 


接 下 来 我 们 将 进一步 探讨 React € JSX 的 使 用 方式 。 


ReactJS 4 Component 入 门 介绍 


延伸 阅读 


1. React 入 门 实例 教程 

2. React Demystified 

3. Top-Level API 

4. ES6 Classes Component 


(image via maketea ) 
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JSX 简明 入 门 教学 指南 


JSX 简明 入 门 教学 指南 











根据 React 官方 定义 ，React 是 一 个 构建 使 用 者 介面 的 JavaScritp Library。 以 
MVC 模式 来 说 ，ReactJS 主要 是 负责 View 的 部 份 。 过 去 一 段 时 间 ， 我 们 被 灌输 了 
许多 前 端 分 离 的 观念 ， 在 前 端 三 兄弟 中 (或 三 姊妹 、 三 剑客 ) : HTM 掌管 内 容 结 
构 、CSS 负责 外 观 样 式 ，JavaScript 主管 逻辑 互动 ， 千 万 不 要 混在 一 块 。 然 而 ， 在 
React 世界 里 ， 所 有 事物 都 是 以 Component 为 基础 ， 将 同一 个 Compoent 相关 的 
程序 和 资源 都 放 在 一 起 ， 而 在 编写 React Component 时 我 们 通常 会 使 用 JSX 的 方 
式 来 提升 程序 编写 效率 。 事 实 上 ，JSX 并 非 一 种 全 新 的 语言 ， 而 是 一 种 语法 糖 
(Syntatic Sugar) ， 一 种 语法 类 似 XML 的 ECMAScript 语法 扩充 。 在 ISX 中 
HTML 和 组 建 这 些 元 素 标 签 的 代码 有 紧密 的 关系 。 因 此 你 可 能 要 熟悉 一 下 以 
Component 为 单位 的 思考 方式 ( 本文 主 要 使 用 ES6 语法 ) 。 


此 外 ，React 和 JSX 的 思维 在 于 善 用 JavaScript 49 4& X 8677 > 3X EE Ao RTS 
言 ， 这 和 Angular 强化 HTML 的 理念 也 有 所 不 同 。 当 然 JSX 并 非 强 制 使 用 ， 你 也 
可 以 选择 不 用 ， 因 为 最 终 JSX 的 内 容 会 转化 成 JavaScript (浏览 器 只 看 的 性 
JavaScript) 。 不 过 等 你 阅读 完 接 下 来 的 内 容 ， 你 或 许 会 开始 发 现 JSX HF > TB 
考虑 使 用 JSX 的 语法 。 


9f 


一 、 使 用 JSX 的 好 处 


1. 提供 更 加 语意 化 且 易 懂 的 标签 


由 于 ISX 类 似 XML 的 语法 ， 让 一 些 非 开发 人 员 也 更 容易 看 懂 ， 且 能 精确 定义 包含 
属性 的 树 状 结构 。 一 般 来 说 我 们 想 做 一 个 反馈 表单 ， 使 用 HTML 写法 通常 会 长 这 
样 : 
<form class="messageBox"> 
<textarea></textarea> 


«button type="Submit"></button> 
</form> 


使 用 JSX， 就 像 XML 语法 结构 一 样 可 以 自行 定义 标签 且 有 开始 和 关闭 ， 容 易 理 
解 : 


<MessageBox /> 


React 思路 认为 使 用 Component 比 起 模版 (Template) 和 显示 逻辑 (Display 
Logic) 更 能 实现 关注 点 分 离 的 概念 ， 而 搭配 JSX 可 以 实现 声明 式 
Declarative (注重 Whatto) ， 而 非 命令 式 Imperative (注重 how to) 的 程 


序 编写 方式 : 
68,033 people like this. 
Va) ie) You and 68,033 others like this. 


以 Facebook 上 面 点 赞 功 能 来 说 ， 若 是 命令 式 Imperative 写法 大 约会 是 长 这 
样 : 


if(userLikes()) { 
if('!hasBlueLike()) { 
removeGrayLike(); 
addBlueLike(); 


j 
) else { 


if(hasBlueLike()) { 
removeBlueLike(); 
addGrayLike(); 


ak 


若是 声明 式 Declarative 则 是 会 长 这 样 : 
if(this.state.liked) { 
return (<BlueLike />); 


) else { 
return (<GrayLike />); 


看 完 上 述说 明 是 不 是 感觉 React 结合 JSX 的 写法 更 易 读 易 懂 ? 事实 上 ， 当 
Component 组 成 越 来 越 复杂 时 ， 若 使 用 JSX 将 可 以 让 整个 结构 更 加 直观 ， 可 读 性 


2. 更 加 简洁 


虽然 最 终 ISX 会 转换 成 JavaScript， 但 使 用 JSX 可 以 让 程序 看 起 来 更 加 简洁 ， 以 
下 为 使 用 JSX 和 不 使 用 JSX 的 范例 : 


«a href="https://facebook.github.io/react/">Hello! </a> 


不 使 用 JSX (记得 我 们 说 过 JSX 是 选用 的 ) 


// React.createELement( 元 件 /HTML 标 签 ， 元 件 属 性 ， 以 对 象 表示 ， TAI) 
React.createElement('a', (href: 'https://facebook.github.io/reac 
t/"L- “Hello!” ) 


结合 原生 JavaScript 语法 


JSX 并 非 一 种 全 新 的 语言 ， 而 是 一 种 语法 糖 (Syntatic Sugar) ， 一 种 语法 类 似 
XML 的 ECMAScript 语法 扩充 ， 所 以 并 没有 改变 JavaScript 语意 。 通 过 结合 
JavaScript ， 可 以 释放 JavaScript 语言 本 身 能 力 。 下 面 例 子 就 是 运用 map 方法 ， 
轻易 把 result 值 和 迭代 出 来 ， 产 生 无 序 清单 (ul) HAR? REL SURE FIER OR 
版 语言 (这 边 有 个 小 地 方 要 留意 的 是 每 个 <li> 元 素 记 得 加 上 独特 的 key 这 边 用 
map function 迭代 出 的 index， 不 然 会 出 现 问题 ) 


// const AY X 
const lists - ['JavaScript', 'Java', 'Node', 'Python']; 


class HelloMessage extends React.Component { 
render() ( 
return ( 
«ul» 
{lists.map((result, index) => { 
return («li key={index}>{result}</1li>); 
})} 
</ul>); 
j 
j 


二 、JSX 用 法 摘要 


1. 环境 设 定 与 使 用 方式 


步 了 解 为 何 要 使 用 JSX 后 ， 我 们 来 聊 聊 ISX 的 用 法 。 一 般 而 言 ISX 通常 有 两 种 
s EUR 


1. 使 用 browserify 或 webpack 4 CommonJS bundler 并 整合 babel ff 4E 3€ 
2. 于 浏览 器 端 做 解析 


Qw 474 gH 


在 这 边 简 单 起 见 ， 我 们 先 使 用 第 二 种 方式 ， 先 让 大 家 专注 熟悉 JSX 语法 使 用 ， 等 到 
后 面 章节 再 教 大 家 使 用 bundler 的 方式 去 做 解析 (可 以 试 著 把 下 面 的 原始 码 贴 到 
JSbin 的 HTML 看 结果 ) 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset="UTF-8" /» 
<title>Hello React!</title> 
<!-- 请 先 于 index.html 中 引入 react.js, react-dom.js 和 babel- 
core 的 browser.min.js --> 
«script src="https://cdnjs.cloudflare.com/ajax/libs/react/15 
20. 1/react min. js" ></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15 
.0.1/react-dom.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-co 
re/5.8.23/browser .min.js"></script> 
</head> 
<body> 
<div id="example"></div> 
«script type="text/babel"> 
// 代码 写 在 这 边 | 
ReactDOM. render ( 


document .getElementById( 'example') 
); 
</script> 
</body> 
</html> 


一 般 加 载 ISX 方式 有 : 


e Aw 


<script type="text/babel"> 
ReactDOM. render ( 


, 


document .getElementById('example' ) 
); 


</Script= 


e 从 外 部 引入 


<script type="text/jsx" src="main.jsx"></script> 


2. 标签 用 法 


JSX 标签 非常 类 似 XML ， 可 以 直接 书写 。 一 般 Component 命名 首 字 大 写 ，HTML 
Tags 小 写 。 以 下 是 一 个 建立 Component 的 class : 


class HelloMessage extends React ,. Component { 
render() { 
return ( 
<div> 
<p>Hello React !</p> 
<MessageList /> 
</div> 


); 


3. 转换 成 JavaScript 


JSX 最 终 会 转换 成 浏览 器 可 以 读 取 的 JavaScript > AFA HAR : 


React .createElement( 
string/ReactClass, // 表示 HTML ;/G,€ X React Component 


r 


[object props], // 属性 值 ， 用 对 象 表示 
children] // 接 下 来 参数 篆 为 元 素 子 元 素 
[ 


解析 前 (特别 注意 在 JSX 中 使 用 JavaScript 表达 式 时 使 用 {} 括 起 ， 如 下 方 范例 
的 text ， 里 面 对 应 的 是 变数 。 若 需 希 望 放置 一 般 文 字 ， 请 加 上 '' ) 


var text = 'Hello React'; 
<hi>{text}</h1> 
<hi>{'text'}</h1i> 


解析 完 后 : 


var text = 'Hello React'; 
React.createElement("hi", null, "Hello React!"); 


另外 要 特别 要 注意 的 是 由 于 JSX 最 终 会 转 成 JavaScript 且 每 一 个 JSX 节点 都 对 应 
到 一 个 JavaScript 44 > RÆ Component 的 render 方法 中 只 能 回 传 一 个 根 
节点 (Root Nodes) 。 例 如 : 若 有 多 个 «div» 要 render 请 在 外 面包 一 个 
Component 或 <div> 、 <span> 元 素 。 


由 于 JSX 最 终 会 编译 成 JavaScript， 注 解 也 一 样 使 用 // 和 /**/ 当做 注解 方 


// 单行 注解 


var content = ( 
<List> 
{/* 若是 在 子 元 件 注解 要 加 {} */} 
<Item 
"EE 
注解 
v ra 
name={window.isLoggedIn ? window.name : ''} // 单行 注解 
/? 
SS 


); 


5. 属性 


在 HTML 中 ， 我 们 可 以 通过 标签 上 的 属性 来 改变 标签 外 观 样 式 ， 在 JSX 中 也 可 
以 ， 但 要 注意 class 和 for 由 于 为 JavaScript 保留 关键 字 用 法 ， 因 此 在 JSX 
中 使 用 className 和 htmlFor 替代 。 


class HelloMessage extends React ,. Component { 
render() { 
return ( 
<div className="message"> 
<p>Hello React !</p> 
</div> 


); 


Boolean 属性 


在 ISX 中 预 设 只 有 属性 名 称 但 没 设 值 为 true ， 例 如 以 下 第 一 个 input 标签 


disabled 虽然 没 设 值 ， 但 结果 和 下 面 的 input 为 相同 : 


<input type="button" disabled />; 
<input type="button" disabled={true} />; 


反之 ， 若 是 没有 属性 ， 则 预 设 预 设 为 ”false 


<input type="button" />; 
<input type="button" disabled={false} />; 


6. 扩展 属性 


在 ES6 中 使 用 ... 是 和 欠 代 对 象 的 意思 ， 可 以 把 所 有 对 象 对 应 的 值 先 代 出 来 设 定 


属性 ， 但 要 注意 后 面 设 定 的 属性 会 益 掉 前 面相 同属 性 : 


var props = { 
style: "width:20px", 
className: "main", 
value: "yo", 


<HelloMessage {...props} value="yo" /> 


Tf TUE 


React.createElement("hi", React._spread({}, props, {value: 


), "Hello React!"); 


7T. 上 自 定义 属性 
若是 希望 使 用 自 定 义 属 性 ， 可 以 使 用 data- 


<HelloMessage data-attr="xd" /> 


8. i: 5 HTML 


OM 


通常 为 了 避免 信息 安全 问题 ， 我 们 会 过 滤 掉 HTML， 若 需要 显示 的 话 可 以 使 用 : 


<div>{{_html: '«hi»Hello World! !</h1>'}}</div> 


9. 样式 使 用 


在 ISX 中 使 用 外 观 样 式 方法 如 下 ， 第 一 个 {} 是 JSX 语法， 第 二 个 为 
JavaScript 对 象 。 与 一 般 属性 值 用 - 分 隔 不 同 ， 为 驼峰 式 命名 写法 : 


<HelloMessage style={{ color: '#FFFFFF', fontSize: '30px'}} /> 


10. 事件 处 理 


事件 处 理 为 前 端 开发 的 重头 戏 ， 在 ISX 中 通过 inline 事件 的 绑 定 来 监听 并 处 理事 件 
(注意 也 是 驼峰 式 写 法 ) ， 更 多 事件 处 理 方法 请 参考 官网 


<HelloMessage onClick={this.onBtn} /> 


E 


Cm 


/ 


以 上 就 是 ISX 简明 入 门 教学 ， 和 希望 通过 以 上 介绍 ， 让 读者 了 解 在 React 中 为 何 要 
使 用 ISX? UR ISX 基本 概念 和 用 > 。 最 后 为 大 家 复习 一 下 : 在 React 世界 里 ， 
所 有 事物 都 是 以 Component 为 基础 ， 通 常会 将 同一 个 Compoent 相关 的 程序 和 资 
源 都 放 在 一 起 ， 而 在 编写 React Component 时 我 们 常会 使 用 JSX 的 方式 来 提升 程 
序 编写 效率 。JSX 是 一 种 语法 类 似 XML 的 ECMAScript 语法 扩充 ， 可 以 善 用 
JavaScript $5 3& X $& 77 > AAEE & s 2 R JSX 并 非 强制 使 用 ， 你 也 可 以 
Pu ， 因 为 最 终 JSX 的 内 容 会 转化 成 JavaScript。 当 相信 阅读 完 上 述 的 内 容 
， 你 会 开始 认真 考虑 使 用 JSX 的 语法 。 


延伸 阅读 


1. Imperative programming or declarative programming 
2. JSX in Depth 
3. 从 零 开 始 学 React (ReactJS 101) 


JSX 简明 入 门 教学 指南 
(image via adweek, codecondo ) 
‘door: 任意 门 


| 回首 页 | 上 一 章 : ReactJS 与 Component 设计 入 门 介绍 | 下 一 章 : Props ` 
State ` Refs 与 表单 处 理 | 


| 纠 错 、 提 问 或 许愿 | 


Ch04 Props/State 基础 与 Component 生命 
周期 


1. Props ` State ` Refs 与 表单 处 理 
2. React Component 规格 与 生命 周期 ( Life Cycle) 


> 
LI 


‘door: 随意 门 


| 回首 页 | 


Props ` State ` Refs 与 表单 处 理 


在 前 面 的 章节 中 我 们 已 经 对 于 React 和 JSX 有 初步 的 认识 ， 我 们 也 了 解 到 React 
Component 事实 上 可 以 视 为 显示 UI 的 一 个 状态 机 (state machine) ， 而 这 个 状态 
机 根据 不 同 的 state (通过 setState() 修改 ) 和 props (由 父 元 素 传 入 ) ， 
Component 会 出 现 对 应 的 显示 结果 。 本章 将 使 用 React 官网 首页 上 的 范例 (使 用 
ES6+) 来 更 进一步 说 明 Props 和 State 特性 及 在 React 如 何 进行 事件 和 表单 处 

理 。 


Props 


首先 我 们 使 用 React 官网 上 的 A Simple Component 来 说 明 props 的 使 用 方式 。 由 
于 传 入 组 件 的 name 属性 为 Mark， 故 以 下 代码 将 会 在 浏览 器 显示 Hello, Mark » 4 
对 传 入 的 props 我 们 也 有 验证 和 预 设 值 的 设计 ， 让 我 们 撰写 的 组 件 可 以 更 加 稳定 健 
壮 (robust) 。 


HTML Markup : 


Props ` State ^ Refs 5A € 4b 3E 


<!DOCTYPE html» 
«html» 
«head» 
<meta charset="utf-8"> 
«meta name="viewport" content="width=device-width"> 
<title>A Component Using External Plugins</title> 
</head> 
<body> 
«1-- 这 边 方便 使 用 CDN 方式 引入 react ^ react-dom 进行 讲解 ， 实 务 上 和 实 
战 教学 部 分 我 们 会 使 用 webpack --» 
<script src="https://fb.me/react-15.1.0.js"></script> 
«script src="https://fb.me/react -dom-15.1.0.js"></script> 
<div id="app"></div> 
<script src="./app.js"></script> 
</body> 
</html> 


app.js > 4$ f] ES6 Class Component 写法 : 


Props ` State ` Refs 与 表单 处 理 


class HelloMessage extends React.Component { 

// 若是 需要 绑 定 this .方法 或 是 需要 在 constructor 使 用 props’ € & s 
tate， 就 需要 constructor。 若 是 在 其 他 方法 (如 render) 使 用 this.props 
则 不 用 一 定 要 定义 constructor 

constructor(props) { 

// 对 于 OOP 面向 对 象 程序 设计 熟悉 的 读者 应 该 对 于 constructor 建构 
子 的 使 用 不 陌生 ， 事 实 上 它 是 ESO 的 语法 糖 ， 骨 子 里 还 是 prototype based 面向 
对 象 程序 语言 。 通 过 extends 可 以 继承 React.Component 父 类 别 。super 方法 
可 以 调用 继承 父 类 别 的 建构 子 

super(props); 

this.state = {} 

J 

// render 是 唯一 必须 的 方法 ， 但 如 果 是 单纯 render UI 建议 使 用 Functi 
onal Component E %& > swe se LR f HK 

render() { 

return ( 
<div>Hello {this.props.name}</div> 


// PropTypes JE > x 4$ A 8j props type 不 是 string 将 会 显示 错误 
HelloMessage.propTypes - ( 
name: React.PropTypes.string, 


// Prop 预 设 值 ， 若 对 应 props 没 传 入 值 将 会 使 用 default 44 Zuck 
HelloMessage.defaultProps = ( 
name: 'Zuck', 


j 


ReactDOM.render(«HelloMessage name="Mark" />, document.getElemen 
tById('app')); 


关于 React ES6 class constructor super() 解释 可 以 参考 React ES6 class 
constructor super() ° 


使 用 Functional Component 写法 : 


// Functional Component TARA f(d) => UI， 根 据 传 进去 的 props 绘 出 
对 应 的 UI。 注 意 这 边 props 是 传 入 函 式 的 参数 ， 因 此 取 用 props 不 用 加 this 
const HelloMessage = (props) => ( 

<div>Hello {props.name}</div> 


); 


// PropTypes 验证 ， 若 传 入 的 props type 不 是 string 将 会 显示 
HelloMessage.propTypes = { 
name: React.PropTypes.string, 


// Prop 预 设 值 ， 若 对 应 props 没 传 入 值 将 会 使 用 default 值 Zuck。 用 法 等 于 
ES5 的 getDefaultProps 

HelloMessage.defaultProps = ( 

name: 'Zuck', 


j 


ReactDOM.render(«HelloMessage name="Mark" />, document.getElemen 
tById('app')); 


在 jsbin 上 的 范例 : 


A Component Using External Plugins on jsbin.com 


State 


接 下 来 我 们 将 使 用 A Stateful Component 这 个 范例 来 讲解 State 的 用 法 。 在 React 
Component 可 以 自己 管理 自己 的 内 部 state， 并 用 this.state 来 存 取 state » 4 

setState() 方法 更 新 了 state 后 将 重新 调用 render() 方法 ， 重 新 绘制 
component 内 容 。 以 下 范例 是 一 个 每 1000 毫秒 (等 于 1 秒 ) 就 会 加 一 的 累加 器 。 
由 于 这 个 范例 是 Stateful Component 因此 仅 使 用 ES6 Class Component， 而 不 使 
用 Functional Component ° 


HTML Markup : 


Props ` State ^ Refs 5A € 4b 3E 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset="utf-8"> 
«meta name="viewport" content="width=device-width"> 
<title>A Component Using External Plugins</title> 
</head> 
<body> 
<script src="https://fb.me/react-15.1.0.js"></script> 
<script src="https://fb.me/react-dom-15.1.0.js"></script> 
<div id="app"></div> 
<script src="./app.js"></script> 
</body> 
</html> 


app.js : 


class Timer extends React.Component { 
constructor(props) { 
super(props); 
// 5 ES5 React.createClass({}) 不 同 的 是 component Ag x3 
的 方法 需要 自行 绑 定 this context， 或 是 使 用 arrow function 
this.tick = this.tick.bind(this); 
// 初始 state’ 4 T ESS 中 的 getInitialState 
this.state = { 
secondsElapsed: 0, 


} 
// 累加 器 方法 ， 每 一 秒 被 调用 后 就 会 使 用 setState() 更 新 内 部 state?’ it 
Component 重新 render 
tick() { 
this.setState({secondsElapsed: this.state.secondsElapsed 
+ 1}); 
} 
// componentDidMount A component 生命 周期 中 阶段 component 已 插 
入 节点 的 阶段 ， 通 常 一 些 非 同步 操作 都 会 放置 在 这 个 阶段 。 这 便 是 每 1 秒 钟 会 去 调用 ti 
Chea 
componentDidMount() { 
this.interval = setInterval(this.tick, 1000); 


j 
// componentWillUnmount 为 component 生命 周期 中 component 即将 
移出 插入 的 节点 的 阶段 。 这 边 移 除了 setInterval 效力 
componentWillUnmount() { 
clearInterval(this.interval); 


} 
// render X class Component 中 唯一 需要 定义 的 方法 ， 其 回 传 compone 
nt 和 欲 显 示 的 内 容 
render() { 
return ( 
<div>Seconds Elapsed: {this.state.secondsElapsed}</div> 


): 


ReactDOM.render(«Timer />, document.getElementById('app')); 


E Saw i 


事件 处 理 (Event Handle) 


在 前 面 的 内 容 我 们 已 经 学 会 如 何 使 用 props 和 state， 接 下 来 我 们 要 更 进一步 学 习 
在 React 内 如 何 进 行事 件 处 理 。 下 列 将 使 用 React 官网 的 An Application 当做 例 
子 ， 实 践 出 一 个 简单 的 TodoApp ° 


HTML Markup : 


Props ` State ` Refs 与 表单 处 理 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset="utf-8"> 
«meta name="viewport" content="width=device-width"> 
<title>A Component Using External Plugins</title> 
</head> 
<body> 
<script src="https://fb.me/react-15.1.0.js"></script> 
<script src="https://fb.me/react-dom-15.1.0.js"></script> 
<div id="app"></div> 
<script src="./app.js"></script> 
</body> 
</html> 


app.js : 


// TodoApp 组 件 中 包含 了 显示 Todo 的 TodoList f+’ Todo 的 内 容 通过 pro 
ps 传 入 TodoList 中 。 由 于 TodoList 仅 单 纯 Render UI 不 涉及 内 部 state 
操作 是 stateless component， 所 以 使 用 Functional Component 写法 。 需 要 
特别 注意 的 是 这 边 我 们 用 map function 来 近代 Todos， 需 要 留意 的 是 每 个 迭代 的 
元 素 必 须要 有 unique key 不 然 会 发 生 错误 (可 以 用 自 定义 id» RA map fu 
nction 的 第 三 个 参数 index) 

const TodoList = (props) => ( 


<ul> 
{ 
props.items.map((item) => ( 
<li key={item.id}>{item. text}</li> 
)) 
j 
«/ul» 


// 整个 App 的 主要 组 件 ， 这 边 比 较 重 要 的 是 事件 处 理 的 部 份 ， 内 部 有 
class TodoApp extends React.Component { 
constructor(props) { 
super (props); 
this.onChange = this.onChange.bind(this); 
this.handleSubmit = this.handleSubmit.bind(this); 


this.state = ( 
items: [], 
text: te 


J 
onChange(e) (1 
this.setState({text: e.target.value}); 
} 
handleSubmit(e) ( 
e.preventDefault(); 
const nextItems = this.state.items.concat([{text: this.s 
tate.text, id: Date.now())]); 
const nextText - ''; 
this.setState({items: nextItems, text: nextText)); 


} 
render() { 
return ( 
<div> 
<h3>TODO</h3> 
<TodoList items={this.state.items} /> 
<form onSubmit={this.handleSubmit }> 
<input onChange={this.onChange} value={this.state.text 
} /> 
<button>{'Add #' + (this.state.items.length + 1)}</but 
ton> 
</form> 
</div> 
); 
} 
} 


ReactDOM.render(<TodoApp />, document.getElementById('app')); 


以 上 介绍 了 React 事件 处 理 的 部 份 ， 除 了 onchange 和 onSubmit 外 ，React 
也 封装 了 常用 的 事件 处 理 ， 如 onClick 等 。 若 想 更 进一步 了 解 有 哪些 可 以 使 用 的 
事件 处 理 方法 可 以 参考 官网 的 Event System。 


Refs 与 表单 处 理 


上 面 介绍 了 props ( 传 入 后 就 不 能 修改 ) ^ state ( 随 著 使 用 者 互动 而 改变 ) 和 事件 
n 1 后 ， 我 们 将 接续 介绍 如 何在 React 中 进行 表单 处 理 。 同 样 我 们 使 用 React 
范例 A Component Using External Plugins 进行 介绍 。 由 于 React 可 以 容易 整 
ios libraries (例如 : jQuery) ， 本 范例 将 使 用 remarkable 结合 ref & 
性 取出 DOM Value 值 (另外 比较 常用 的 作法 是 使 用 onchange 事件 处 理 方式 处 
理 表单 内 容 ) ， 让 使 用 者 可 以 使 用 Markdown 语法 的 所 见 即 所 得 编辑 器 
(editor) 。 


HTML Markup (除了 引入 react ^ react-dom i CDN 方式 引入 
remarkable 这 个 Markdown 语法 parser 套件 ， 记 得 如 果 没 有 使 用 Webpack 
或 是 browserify + babelify 等 工具 需要 引入 babel-standalone 浏览 器 解析 ES6 

读 法 并 引入 script 加 上 typez"text/babel") : 


<!DOCTYPE html» 
<html> 
<head> 

<meta charset="utf-8"> 

«meta name="viewport" content="width=device-width"> 

<title>A Component Using External Plugins</title> 
</head> 
<body> 
<script src="https://fb.me/react-15.1.0.js"></script> 
<script src="https://fb.me/react-dom-15.1.0.js"></script> 
«script src="https://cdn. jsdelivr.net/remarkable/1.6.2/remarkabl 
e min. js =</Script= 

<div id="app"></div> 

<script type="text/babel" src="./app.js"></script> 

</body> 
</html> 


app.js : 


class MarkdownEditor extends React.Component { 
constructor(props) { 
super(props); 
this.handleChange - this.handleChange.bind(this); 
this.rawMarkup - this.rawMarkup.bind(this); 
this.state - ( 


value: 'Type some *markdown* here!', 


J 
handleChange() { 


this.setState((value: this.refs.textarea.value}); 

} 

// 将 使 用 者 输入 的 Markdown 语法 parse 成 HTML 放 入 DOM 中 ，React 
通常 使 用 virtual DOM 作为 和 DOM 沟通 的 中 介 ， 不 建议 直接 由 操作 DOM Xs M 
时 的 属性 为 dangerouslySetInnerHTML 

rawMarkup() { 

const md = new Remarkable(); 
return { _ html: md.render(this.state.value) }; 
} 
render() { 
return ( 
<div className="MarkdownEditor"> 
<h3>Input</h3> 
<textarea 
onChange-(this.handleChange) 
ref="textarea" 
defaultValue={this.state.value} /> 
<h3>Output</h3> 
<div 
className="content" 
dangerouslySetInnerHTML={this.rawMarkup()} 
/> 
</div> 


); 


ReactDOM.render(«MarkdownEditor />, document.getElementById('app 
')); 


总 结 


NP 


以 上 通过 几 个 React 官网 首页 上 的 范例 介绍 了 Props 和 State 特性 及 在 React 如 何 
进行 事件 和 表单 处 理 这 些 React 中 核心 的 问题 ， 若 还 不 熟悉 的 读者 建议 重新 亲自 动 
手 照 著 范 例 中 的 代码 敲 过 一 遍 ， 也 可 以 使 用 像 jsbin 这 样 所 见 即 所 得 的 工具 来 练 
习 ， 更 能 熟悉 相关 语法 和 AP| 喔 ! 接 下 来 我 们 将 探讨 Component 的 生命 周期 。 


延伸 阅读 

1. React 官方 网 站 

2. Top-Level API 

3. Javascript : this 用 法 整理 
‘door: 任意 门 


| 回首 页 | 上 一 章 : JSX 简明 入 门 教学 指南 | 下 一 章 : React Component 规格 与 生 
命 周期 (Life Cycle) | 


| 纠 错 、 提 问 或 许愿 | 


React Component 规格 与 生命 周期 (Life 
Cycle ) 


经 过 前 面 的 努力 相信 目前 读者 对 于 用 React 开发 一 些 简单 的 组 件 (Component) 已 
经 有 一 定 程度 的 掌握 了 ， 现 在 我 们 将 更 细部 探讨 React Component 的 规格 和 其 生 
命 周 期 。 

命 周 期 


React Component 规格 


若 读 者 还 有 印象 的 话 ， 我们 前 面 介绍 React 特性 时 有 描述 React 的 主要 编写 方式 有 
两 种 ; 一 种 是 使 用 ES6 Class， 另 外 一 种 是 Stateless Components， 使 用 
Functional Component 的 写法 ， 单 纯 演 染 UI。 这 边 再 帮 大 家 复习 一 下 上 一 个 章节 
的 简单 范例 : 


1. 使 用 ES6 的 Class (可 以 进行 比较 复杂 的 操作 和 组 件 生命 周期 的 控制 ， 相 对 于 
stateless components 耗费 资源 ) 


// 注意 组 件 开头 第 一 个 字母 都 要 大 写 
class MyComponent extends React.Component { 
// render Æ Class based 组 件 唯一 必须 的 方法 (method) 
render() { 
return ( 
<div>Hello, {this.props.name}</div> 


); 


// PropTypes E> @fA% props type 不 符合 将 会 显示 错误 
MyComponent.propTypes - ( 
name: React.PropTypes.string, 


j 


K 
m 


// Prop 预 设 值 ， 若 对 应 props 没 传 入 值 将 会 使 用 default 值 ， 为 每 1 
化 Component 共用 的 值 
MyComponent.defaultProps = { 


name: , 


j 


// 将 «MyComponent /> 组 件 播 入 id A app 的 DOM 元 素 中 
ReactDOM.render(«MyComponent name="Mark"/>, document.getElme 
ntById('app')); 


2. 使 用 Functional Component 写法 (单纯 地 render UI 的 stateless 
components， 没 有 内 部 状态 、 没 有 实际 对 象 和 ref， 没 有 生命 周期 函数 。 若 非 
需要 控制 生命 周期 的 话 建议 多 使 用 stateless components 获得 比较 好 的 效能 ) 


// 使 用 arrow function 来 设计 Functional Component 让 UI 设计 更 
单纯 (f(D) => UI) > mal te} 

const MyComponent = (props) => ( 

<div>Hello, {props.name}</div> 


); 


qd (side effect) 


// PropTypes SETE > x 4e Aj props type ^A ez Xn 
MyComponent.propTypes = { 
name: React.PropTypes.string, 


} 


// Prop 预 设 值 ， 若 对 应 props 没 传 入 值 将 会 使 用 default 4 


MyComponent.defaultProps = { 


name: ; 


j 


// 将 «MyComponent /> 组 件 插入 id A app 的 DOM 元 素 中 
ReactDOM.render(«MyComponent name="Mark"/>, document.getElme 
ntById('app')); 


值得 留意 的 是 在 ES6 Class 中 render() 是 唯一 必要 的 方法 (但 要 注意 的 是 请 保 
持 redner() 的 纯粹 ， 不 要 在 里 面 进行 state 修改 或 是 使 用 非 同 步 方法 和 浏览 
器 互动 ， 若 需 非 同步 互动 请 于 componentDidMount() 操作 ) ， 而 Functional 
Component 目前 允许 return null 值 。 喔 对 了 ， 在 ES6 中 也 不 支持 mixins 
复 用 其 他 组 件 的 方法 了 。 


React Component 生命 周期 


React Component， 就 像 人 会 有 生老病死 一 样 有 生命 周期 。 一 般 而 言 Component 
有 以 下 三 种 生命 周期 的 状态 : 


1. Mounting : 已 插入 真实 的 DOM 
2. Updating : 正在 被 重新 演 染 
3. Unmounting : 已 移出 真实 的 DOM 


针对 Component 的 生命 周期 状态 React 也 有 提供 对 应 的 处 理 方法 : 


1. Mounting 


o componentWillMount() 
o componentDidMount() 


2. Updating 
o componentWillReceiveProps(object nextProps) : 已 载 入 组 件 收 到 新 的 参 
数 时 呼叫 


o shouldComponentUpdate(object nextProps, object nextState) : 组 件 判断 
是 否 重新 泻 染 时 呼叫 ， 起 始 不 会 呼叫 除非 呼叫 forceUpdate() 
o componentWillUpdate(object nextProps, object nextState) 
o componentDidUpdate(object prevProps, object prevState) 
3. Unmounting 
o componentWillUnmount() 


很 多 读者 一 开始 学 习 Component 生命 周期 时 会 觉得 很 抽象 ， 所 以 接 下 来 用 一 个 简 
单 范例 让 大 家 感受 一 下 Component 的 生命 周期 。 读 者 可 以 发 现 当 一 开始 载 入 组 件 
时 第 一 个 会 触发 console.1og('constructor');，， 依 序 执行 
componentWillMount ^ componentDidMount ， 而 当 点 击 文字 触发 
handleClick() 更 新 state 时 则 会 依 序 执行 

componentWillUpdate 、 componentDidUpdate 


HTML Markup : 


<!DOCTYPE html» 

<html> 

<head> 
<meta charset="utf-8"> 
«meta name="viewport" content="width=device-width"> 
«script srcs"https*//fb-me/react-15.1.-0.]s' ^s/scrapt- 
«script src="https://fb.me/react-dom-15.1.0.js"></script> 
<title>Component LifeCycle</title> 

</head> 

<body> 
<div id="app"></div> 

</body> 

</html> 


Component 生命 周期 展示 : 


class MyComponent extends React.Component { 


Ei 


constructor (props) { 
super (props); 
console.log('constructor'); 


this.handleClick = this.handleClick.bind(this); 


this.state = { 
name: 'Mark', 


J 
handleClick() ( 


this.setState(('name': 'Zuck'}); 
} 
componentWillMount() { 
console.log( 'componentWillMount' ); 
} 
componentDidMount() { 
console.log('componentDidMount'); 
} 
componentWillReceiveProps() { 
console.log('componentWillReceiveProps!'); 
} 
componentWillUpdate() { 
console.log('componentWillUpdate'); 
} 
componentDidUpdate() { 
console.log( 'componentDidUpdate' ); 
} 
componentWillUnmount() { 
console.log('componentWillUnmount'); 
} 
render() { 
return ( 


<div onClick={this.handleClick}>Hi, {this.state.name}</div> 


): 


ReactDOM.render(«MyComponent /», document.getElementById('app!')) 


1 
, 


—]»i 











React Component 规格 与 生命 周期 【Life Cycle) 
点 击 看 详细 范例 
(en —> 
.render() 


ReactDOM 
.unmountComponentAtNoder) 







setState() 


i 
y ! 
77-.false 
forceUpdate() 


其 中 特殊 处 理 的 函数 shouldcomponentUpdate ， 目 前 预 设 return true ° € 
你 想 要 优化 效能 可 以 自己 编写 判断 方式 ， 若 采用 immutable 可 以 使 用 
nextProps === this.props 比 对 是 否 有 变动 : 


shouldComponentUpdate(nextProps, nextState) { 
return nextProps.id !== this.props.id; 


Ajax 3E IF] zb Ab 3€ 


若 有 需要 进行 Ajax 非 同 步 处 理 ， 请 在 componentDidMount 进行 处 理 。 以 下 通过 
jQuery 执行 Ajax 取得 Github API 资料 当做 范例 : 


HTML Markup : 
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React Component 规格 与 生命 周期 (Life Cycle) 


<!DOCTYPE html» 
«html» 
«head» 
«meta charset-'utf-8"» 
«meta name-"viewport" content="width=device-width"> 
«script src="https://fb.me/react-15.1.0.js"></script> 
«script src="https://fb.me/react-dom-15.1.0.js"></script> 
«script src="https://code. jquery.com/jquery-3.1.0.js"></script> 


<title>GitHub User</title> 
</head> 
<body> 

<div id="app"></div> 
</body> 
</html> 
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class UserGithub extends React.Component { 
constructor(props) { 
super(props); 
this.state - ( 
username: '', 
githubtUrl: '', 


avatarUrl: '', 


} 


componentDidMount() { 
$.get(this.props.source, (result) => { 

console.log(result); 

const data = result; 

if (data) { 

this.setState({ 

username: data.name, 
githubtUrl: data.html url, 
avatarUrl: data.avatar url 


render() ( 
return ( 
«div» 
<h3>{this.state.username}</h3> 
«img src={this.state.avatarUrl} /> 
«a href={this.state.githubtUrl}>Github Link</a>. 
</div> 


); 


ReactDOM. render ( 
<UserGithub source="https://api.github.com/users/torvalds" />, 
document .getElementById('app' ) 


); 


点 击 看 详细 范例 


E 


Cs 


4 


以 上 介绍 了 React Component 规格 与 生命 周期 (Life Cycle) 的 概念 ， 其 中 生命 周 


期 的 概念 对 于 初学 者 来 说 可 能 会 比较 抽象 ， 建 议 读者 跟著 范例 动手 实践 。 接 下 来 我 
们 将 更 进一步 介绍 React Router 让 读者 感受 一 下 单 页 式 应 用 程序 (single page 


的 设计 方式 。 
延伸 阅读 


1. Component Specs and Lifecycle 


(image via react-lifecycle ) 


‘door: 任意 门 

| 回首 页 | 上 一 章 : Props、State、Refs 与 表单 处 理 | 下 一 章 : React Router AT] 
实战 教学 | 

| 纠 错 、 提 问 或 许愿 | 


Ch05 React Router 
1. React Router 入 门 实战 教学 
:door: 任意 门 


| 98 | 


Md 


React Router 入 门 实战 教学 


REACT/ ROUTER 


若 你 是 从 一 开始 一 路 走 到 这 里 读者 请 先 给 自己 一 个 爱 的 鼓励 吧 ! LAAT React X 
础 的 训练 后 ， 相 信 各 位 读者 应 该 都 等 不 及 想 大 展 举 脚 了 | 接 下 来 我 们 将 进行 比较 复 
杂 的 应 用 程序 开发 并 和 读者 介绍 目前 市 场 上 常见 的 不 刷 页 单 页 式 应 用 程序 (single 
page application) 的 设计 方式 。 


单 页 式 应 用 程序 (single page application) 


传统 的 Web 开发 主要 是 由 伺服 器 管理 URL Routing fei Ze HTML. 页 面 ， 过 往 每 次 
URL 一 换 或 使 用 者 连接 一 点 ， 就 需要 重新 从 伺服 器 端 重 新 载 入 页 面 。 但 随 著 使 用 者 
对 于 使 用 者 体验 的 要 求 提升 ， 许 多 的 网 页 应 用 程序 纷纷 设计 成 不 刷 页 的 单 页 式 应 用 
程序 (single page application) ， 由 前 端 负责 URL 的 routing 管理 ， 若 需要 和 后 端 
进行 API 资料 沟通 的 话 ， 通 常 也 会 使 用 Ajax 的 技术 。 在 React 开发 世界 中 主流 是 
使 用 react-router 这 个 routing 管理 用 的 library ° 


React Router 环境 设置 
先 透 过 以 下 指令 在 根 目录 产生 npm 配置 文件 package.json 


$ npm init 


安装 相关 包 (包含 开发 环境 使 用 的 包 ) 


$ npm install --save react react-dom react-router 


$ npm install --save-dev babel-core babel-eslint babel-loader ba 
bel-preset-es2015 babel-preset-react eslint eslint-config-airbnb 
eslint-loader eslint-plugin-import eslint-plugin-jsx-ai11y eslin 
t-plugin-react webpack webpack-dev-server html-webpack-plugin 


安装 好 后 我 们 可 以 设计 一 下 我 们 的 文件 夹 结构 ， 首 先 我 们 在 根 目录 建 立 src 和 
res 文件 夹 ， 分 别 放置 script 的 source 和 静态 资源 (如 : 全 域 使 用 的 
.css 和 图 档 ) 。 在 components 文件 夹 中 我 们 会 放置 所 有 components (个 
别 组 件 文 件 夹 中 会 用 index.js 输出 组 件 ， 让 引入 组 件 更 简洁 ) ， 其 余 配 置 文件 
则 放置 于 根 目 录 下 。 


y E react-router-example 
> C3 node modules 
Y Eres 

v E styles 
main.css 
v E» src 
Y & components 
Y B About 
About.js 
index.js 
Y E» App 
App.js 
appStyles.js 
index.js 
> C3 Contacts 
> C3 Home 
> C3 NavLink 
> C3 Repos 
> 3 User 
index.html 
index.js 
[3 -babeirc 
[3 .eslintrc 
package.json 


webpack.config.js 


接 下 来 我 们 先 设 定 一 下 开发 文档 。 


«Cact FOULCI LIKS c 


1. i& € Babel 的 配置 文件 :  .babelrc 


{ 

"presets": [ 
"es2015", 
"react", 

], 
oe | 
J 


2. 设 定 ESLint 的 配置 文件 和 规则 : .eslintrc 


"extends": "airbnb", 
urules 
"react/jsx-filename-extension": [1, { "extensions": [". 
js", ".jsx"] #], 
tr 
"env" :( 
"browser": true, 


3. i& X Webpack 配置 文件 : webpack.config.js 


// 让 你 可 以 动态 插入 bundle 好 的 .js #3] .index.html 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 


const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ 
template: '$( dirnamej/src/index.html', 
filename: 'index.html', 
inject: “body, 

3); 


// entry 为 进入 点 ， output 为 进行 完 eslint^ babel loader 转译 后 的 
档案 位 置 
module.exports = { 

entry: [ 


N 


af ShC/ Index. Sir 

], 

output: ( 
path: ^"$( . dirname)/dist', 
filename: 'index bundle.js', 


i 
module: { 
preLoaders: [ 
t 
test: /\.7SxS|\.15s/, 
loader: 'eslint-loader', 
include: ~“${__dirname}/src’, 
exclude: /bundle\.js$/ 
} 
], 
loaders: [( 
test: ASS, 
exclude: /node_modules/, 
loader: 'babel-loader', 
query: { 
presets: ['es2015', 'react'], 
tr 
3l 
ty 


// 启动 开发 测试 用 server 设 定 (不 能 用 在 production) 
devServer: { 

inline: true, 

port: 8008, 


ty 
plugins: [HTMLWebpackPluginConfig], 


e 


太 好 了 | 这 样 我 们 就 完成 了 开发 环境 的 设 定 可 以 开始 动手 实践 React Router 应 
用 程序 了 | 


开始 React Routing 之 旅 


HTML Markup : 


<!DOCTYPE html» 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>ReactRouter</title> 
<link rel="stylesheet" type="text/css" href="../res/styles/mai 
n.css"> 
</head> 
<body> 
<div id="app"></div> 
</body> 
</html> 


Je 


以 下 是 webpack.config.js 的 进入 点 src/index.js ， 负 责 管理 Router 和 
render 组 件 。 这 边 我 们 要 先 详 细 讨 论 的 是 ， 为 了 使 用 React Router 功能 引入 了 
许多 react-router 内 部 的 组 件 。 


1. Router Router 是 放置 Route 的 容器 ， 其 本 身 不 定义 routing > ŽE routing 
规则 由 Route 定义 。 


2. Route Route 负责 URL 和 对 应 的 组 件 关系 ， 可 以 有 多 个 Route 规则 也 可 
VAA RE (nested) Routing 。 像 下 面 的 例子 就 是 每 个 页 面 都 会 先 载 入 
App 组 件 再 载 入 对 应 URL 的 组 件 。 


3. history Router 中 有 一 个 属性 history 的 规则 ， 这 边 使 用 我 们 使 用 
hashHistory ， 使 用 routing 将 由 hash (#) 变化 决定 。 例 如 : 当 使 用 者 
拜访 http://www.github.com/ ， 实 际 看 到 的 会 是 
http://www.github.com/#/ 。 下 列 范 例 若 是 拜访 了 /about 则 会 看 到 
http://localhost:8008/4/about 并 载 入 App 组 件 再 载 入 About 组 
件 。 


o hashHistory 教学 范例 使 用 的 ， 会 通过 hash 进行 对 应 。 好 处 是 简单 易 
用 ， 不 用 多 余 设 定 。 


o browserHistory 适用 于 伺服 器 端 泻 染 ， 但 需要 设 定 伺服 器 端 避免 处 理 错 
误 ， 这 部 份 我 们 会 在 后 面 的 章节 详细 说 明 。 注 意 的 是 若是 使 用 Webpack 
开发 用 伺服 器 需 加 上 --history-api-fallback 


$ webpack-dev-server --inline --content-base . --history- 
api- fallback 


o createMemoryHistory 主要 用 于 伺服 器 泻 染 ， 使 用 上 会 建立 一 个 存在 记忆 
体 的 history 物件 ， 不 会 修改 浏览 器 的 网 址 位 置 。 


const history = createMemoryHistory(location) 


4. path path 是 对 应 URL 的 规则 。 例 如 : /repos/torvalds 会 对 应 到 
/repos/:name 的 位 置 ， 并 将 参数 传 入 Repos 组 件 中 。 由 
this.props.params.name 取得 参数 。 顺 带 一 提 ， 若 为 查询 参数 /user? 

q-torvalds 2 this.props.location.query.q 取得 参数 。 


5. IndexRoute 由 于 / 情况 下 App 组 件 对 应 的 this.props.children 会 是 
undefinded ， 所 以 使 用 IndexRoute 来 解决 对 应 问题 。 这 样 当 URL 为 
/ 时 将 会 对 应 到 Home 组 件 。 不 过 要 注意 的 是 IndexRoute 没有 path Æ 
性 o 


import 
import 
import 
uter'; 
import 
import 
import 
import 
import 
import 


React from 'react'; 
ReactDOM from 'react-dom'; 
{ Router, Route, hashHistory, IndexRoute ) from 'react-ro 


App from './components/App'; 

Home from './components/Home'; 

Repos from './components/Repos'; 

About from './components/About ' ; 

User from './components/User'; 
Contacts from './components/Contacts'; 


ReactDOM. render ( 


«Rou 


ter history={hashHistory}> 


«Route path="/" component={App}> 


<IndexRoute component={Home} /> 

<Route path="/repos/:name" component={Repos} /> 
<Route path="/about" component={About} /> 
<Route path="/user" component={User} /> 

<Route path="/contacts" component={Contacts} /> 


</Route> 
</Router>, 


docu 


ment.getElementById('app')); 


NE ee ER E 
const routes = ( 


); 


Re 


n 


«Route path="/" component={App}> 
<IndexRoute component={Home} /> 
<Route path="/repos/:name" component={Repos} /> 
<Route path="/about" component={About} /> 
<Route path="/user" component={User} /> 
<Route path="/contacts" component={Contacts} /> 
</Route> 


actDOM. render ( 
<Router routes={routes} history={hashHistory} />, 
document.getElementById('app')); 


由 于 我 们 在 index.js 44A% Z routing > 4 App 组 件 当 做 每 个 组 件 都 会 载 入 的 
母 模版 ， 亦 即 进入 每 个 对 应 页 面 载 入 对 应 组 件 前 都 会 先 载 入 App 组 件 。 这 样 就 可 以 
让 每 个 页 面 都 有 导 览 列 连接 可 以 点 选 ， 同 时 可 以 透 过 props.children 载 入 对 应 
URL 的 子 组 件 。 
1. Link Link 组 件 主要 用 于 点 击 后 连接 转换 ， 可 以 想 成 是 <a> 超 连 接 的 
React 版 本 。 若 是 希望 当 点 击 时 候 有 对 应 的 css style， 可 以 使 用 
activeStyle 、 activeClassName 去 做 设 定 。 范 例 分 别 使 用 于 
index.html 使 用 传统 css RA ` Inline Style、 外 部 引入 Inline Style 
写法 。 
IndexLink IndexLink 主要 是 了 处 理 index 用 途 ， 特 别 注意 当 child route 
actived 时 ，parentroute 也 会 actived 。 所 以 我 们 回首 页 的 连接 使 用 
<IndexLink /> 内 部 的 onlyActiveOnIndex 属性 来 解决 这 个 问题 。 


3. Redirect ` IndexRedirect 这 边 虽 然 没 有 用 到 ， 但 若 读者 有 需要 使 用 到 连接 跳 转 
的 话 可 以 参考 这 两 个 组 件 ， 用 法 类 似 于 Route 和 IndexRedirect ° 


以 下 是 src/components/App/App.js 完整 代码 : 


import React from 'react'; 

import { Link, IndexLink } from 'react-router'; 
import styles from './appStyles'; 

import NavLink from '../NavLink'; 


const App = (props) => ( 
<div> 
<hi>React Router Tutorial</h1i> 
<ul> 
<li><IndexLink to="/" activeClassName="active">Home</Index 
Link></1li> 
<li><Link to="/about" activeStyle={{ color: 'green' }}>Abo 
ut</Link></li> 
<li><Link to="/repos/react-router" activeStyle={styles.act 
ive}>Repos</Link></1i> 
<li><Link to="/user" activeClassName="active">User</Link></ 
li> 
<li><NavLink to="/contacts">Contacts</NavLink></li> 
</ul> 
<!-- 我 们 将 App 组 件 当 做 每 个 组 件 都 会 载 入 的 母 模 版 ， 因 此 可 以 透 过 childr 
en Aog URL 的 子 组 件 --> 
{props.children} 
</div> 


); 


App.propTypes = { 
children: React.PropTypes.object, 


ti 

export default App; 
EIEE el 
对 应 的 组 件 内 部 使 用 Functional Component 进行 Ul 7€ 2& : 


以 下 是 src/components/Repos/Repos.js 完整 代码 : 


import React from 'react'; 


const Repos = (props) => ( 
<div> 
<h3>Repos</h3> 
<h5>{props.params.name}</h5> 
</div> 


); 


Repos.propTypes = { 
params: React.PropTypes.object, 


H 


export default Repos; 


详细 的 代码 读者 可 以 参考 范例 文件 夹 ， 若 读者 跟著 范例 完成 的 话 ， 可 以 在 终端 机 上 
执行 npm start ， 并 于 浏览 器 http://localhost:8008 看 到 以 下 成 果 ， 当 你 
点 选 连接 时 会 切换 对 应 组 件 并 改变 actived 状态 ! 


React Router Tutorial 


* Home 
* About 











ox 
oc 


到 这 边 我 们 又 一 起 完成 了 一 个 重要 的 一 关 ， 学 习 routing 对 于 使 用 React JF 


发 复杂 应 用 程序 是 非常 重要 的 一 步 ， 接 下 来 我 们 将 一 起 学 习 一 个 相对 独立 的 单元 
ImmutableJS ， 但 学 习 ImmutableJS 可 以 让 我 们 在 使 用 React 和 
Flux/Redux 可 以 有 更 好 的 性 能 和 避免 一 些 副作用 。 


延伸 阅读 


Leveling Up With React: React Router 
Programmatically navigate using react router 
React Router 使 用 教程 

React Router 中 文 文档 

React Router Tutorial 


ot ad a 


(iamge via seanamarasinghe ) 


任意 门 


| 回首 页 | 上 一 章 : React Component 规格 与 生命 周期 (Life Cycle) | 下 一 章 : 
ImmutableJS 入 门 教学 | 
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Ch06 ImmutableJS 
1. ImmutableJS 入 门 教学 
‘door: 任意 门 


| 回首 页 | 


amritahlia 1 x 115 o5 
ImmutableJS A1]12X 


ImmutableJS 入 门 教学 


一 般 来 说 在 JavaScript 中 有 两 种 数据 类 型 : Primitive (String、Number、 
Boolean、null、undefinded) 和 Object (Reference) 。 在 JavaScript 中 对 象 的 操 
作 比 起 Java 容 苑 很多， 但 也 因为 相对 弹性 不 严谨 ， 所 以 产生 了 一 些 问题 。 在 
JavaScript 中 的 Object (对 象 ) 数据 是 Mutable (可 以 变 的 ) ， 由 于 是 使 用 
Reference 的 方式 ， 所 以 当 修 改 到 复制 的 值 也 会 修改 到 原始 值 。 例 如 下 面 的 map2 
值 是 指 到 mapi ， 所 以 当 mapi 值 一 改 ， map2 的 值 也 会 受 影响 。 


var mapi T Sle. oboe 


var map2 = mapi; 
map2.a = 2 


通常 一 般 做 法 是 使 用 deepCopy 来 避免 修改 ， 但 这 样 做 法 会 产生 较 多 的 资源 浪 
费 。 为 了 很 好 的 解决 这 个 问题 ， 我 们 可 以 使 用 Immutable Data ， 所 谓 的 
Immutable Data 就 是 一 旦 建立 ， 就 不 能 再 被 修改 的 数据 数据 。 


为 了 解决 这 个 问题 ， 在 2013 年 时 Facebook 工程 师 Lee Byron 打造 了 
ImmutableJS， 但 并 没有 被 预 设 放 到 React 工具 包 中 (虽然 有 提供 简化 的 

Helper) ， 但 ImmutableJS 的 出 现 确实 解决 7 了 React 其 至 Redux 所 遇 到 的 
一 些 问 题 。 


以 下 范例 即 是 引入 了 ImmutableJS 的 效果 ， 读 者 可 以 发 现 ， 虽 然 我 们 操作 了 
mapi 的 值 ， 但 会 发 现 原本 的 mapi 并 未 受到 影响 (因为 任何 修改 都 不 会 影响 到 
原始 数据 ) ， 虽 然 使 用 deepCopy 也 可 以 模拟 类 似 的 效果 但 会 浪费 过 多 的 计算 资 


源 和 内 存 ， ImmutableJS 则 可 以 容易 地 共享 没有 被 修改 到 的 数据 (例如 下 面 的 数 
据 b BPA mapi 所 map2 共享 ) ， 因 而 有 更 好 的 性 能 表现 。 


import Immutable from 'immutable'; 


var mapi = Immutable.Map({ a: 1, b: 3 }); 
var map2 = mapi.set('a', 2); 


mapi.get('a'); // 1 
map2.get('a'); // 2 


ImmutableJS 特性 介绍 


ImmutableJS 提供 了 7 种 不 可 修改 的 数据 类 

型 : List ^ Map ^ Stack ^ OrderedMap ^ Set ^ OrderedSet ^ Recorc 
o 3r Immutable 对 象 操作 都 会 回 传 一 个 新 值 。 其 中 比较 常用 的 有 
List 、 Map 和 Set 


1. Map : 类 似 于 key/value 的 object， 在 ES6 也 有 原生 Map 对 应 
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const Map= Immutable.Map; 


// 1. Map Ad 

const mapi = Map({ a: 1 }); 
mapi.size 

// => 1 


// 2. 新 增 或 取代 Map 元 素 

// set(key: K, value: V) 

const map2 = mapi.set('a', 7); 
// => Map { "a": 7 } 


// 3. 删除 元 素 

// delete(key: K) 

const map3 = mapi.delete('a'); 
// => Map {} 


// 4. 清除 Map AS 
const map4 = mapi.clear(); 


// => Map {} 


// 5. 更 新 Map 元 素 


// update(updater: (value: Map<K，V>) => Map<K，V>) 


// update(key: K, updater: (value: V) => V) 
// update(key: K, notSetValue: V, updater: 
const map5 = mapi.update('a', () => (7)) 

// => Map { "a": 7 } 


// 6. 合并 Map 

const map6 = Map({ b: 3 3); 
mapi.merge(map6); 

ti => Meo T Sen: ip p ES 


2. List : 有 序 且 可 以 重复 值 ， 对 应 于 一 般 的 Array 


(value: V) => V) 
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const List= Immutable.List; 


// 1. 4t List KR 

const aprdto-sEegstCp1 2 21); 
arri.size 

// => 3 


// 2. 新 增 或 取代 List LEAS 

// set(index: number, value: T) 
// 将 index 位 置 的 元 素 替换 

const arr2 = arri.set(-1, 7); 
fee nu 

const arr3 = arri.set(4, 0); 

// => [1, 2, 3, undefined, 0] 


// 8. WH List t# 

// delete(index: number) 

// 删除 index 位 置 的 元 素 

const arr4 = arri.delete(1); 
Aca 


// 4. d&A;GLE 8| List 

// insert(index: number, value: T) 
// 在 index 位 置 插入 value 

const arr5 = arri.insert(1, 2); 

f/f => 1, Zp 2.3] 


// 5. 清空 List 

// clear() 

const arr6 = arri.clear(); 
i = 


3. Set: 没有 顺序 且 不 能 重复 的 列表 
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const Set= Immutable.Set; 


// 1. 建立 Set 
const setl = Set(l1 2, 31); 
Ii => Ser qua 


// 2. BBR 

const set2 = seti.add(1).add(5); 

Ji em Setn die 2 CAST 

// 由 于 Set 为 不 能 重复 集合 ， 故 1 只 能 出 现 一 次 


// 3. 删除 元 素 
const set3 = set1.delete(3); 
// => Set ( 1, 2) 


// 4. RRR 

const set4 = Set([2, 3, 4, 5, 6]); 
seti.union(set4); 

Jp Set fd, 2. 34-561 


// 5. BRE 
set1.intersect(set4); 
mi => Sw a 2 ee 


// 6. RAR 


set1.subtract(set4); 
// => Set { 1 } 


ImmutableJS 的 特性 整理 


1. Persistent Data Structure  ImmutableJS 的 世界 里 ， 只 要 数据 一 被 创建 ， 
就 不 能 修改 ， 维 持 Immutable 。 就 不 会 发 生 下 列 的 状况 : 


var obj = { 
a: 1 
}; 


funcationA(obj); 
console.log(obj.a) // TAX RA SY? 


使 用 ImmutableJS 就 没有 这 个 问题 : 
// 有 些 开 发 者 在 使 用 时 会 在 ` Immutable’ Baw ^$^ 以 示 区 隔 。 


const $obj = fromJS({ 
a: 1 
3); 


funcationA($0bj); 
console.log(S$obj.get('a')) /7 1 


2. Structural Sharing 为 了 维持 数据 的 不 可 变 ， 又 要 避免 像 deepCopy 一 样 复制 
所 有 的 节点 数据 而 造成 的 资源 损耗 ， 在 ImmutableJS 使 用 的 是 o 
Sharing 特性 ， 亦 即 如 果 对 象 树 中 一 个 节点 发 生变 化 的 话 ， 只 会 修改 这 
和 和 受 它 影响 的 父 节点 ， 其 他 节点 则 共享 。 


const obj = { 


count: i, 

lateree c2 E II 

} 

var mapi = Immutable. fromJS(obj); 


var map2 = mapi.set('count', 4); 


console.log(mapi.list --- map2.list); // true 


3. Support Lazy Operation 


Immutable.Range(1, Infinity) 
.map(n => a 


// Error innot perform this action with an infinite size. 


Immutable.Range(1, Infinity) 
.map(n => -n) 

.take(2) 

.reduce((r, n) => r +n, 0); 


// -3 


4. 丰富 的 API 并 提供 快速 转换 原生 JavaScript 的 方式 在 ImmutableJS 中 可 以 使 
用 fromJS() ^ toJS() 进 # ty 和 ImmutableJS 之 间 的 转换 。 但 
cess go 耗费 资源 ， 所 以 若是 你 决定 引入 ImmutableJs 的 话 

尽量 维持 数据 处 在 Immutable 的 状态 。 


5. 支持 Functional Programming Immutable #4 ¥#t7 Functional 
Programming ( RANNAT) 的 概念 ， 所 以 在 ImmutableJs 中 可 以 使 
用 许多 Functional Programming 的 方法 ， 例 
如 : map ^ filter ^ groupBy ^ reduce ^ find ^ findIndex 等 。 


6. 容易 实现 Redo/Undo 历史 回顾 


React 性 能 优化 


ImmutableJS 除了 可 以 和 Flux/Redux 整合 外 ， 也 可 以 用 于 基本 react 性 能 优 
化 。 以 下 是 一 般 使 用 性 能 优化 的 简单 方式 : 


传统 JavaScript 比较 方式 ， 若 数据 型 态 为 Primitive 就 不 会 有 问题 : 


// 在 shouldComponentUpdate 比较 援 下 来 的 props -6-4 > zar moss 
a lg 4L Ml AL 
ET TE HE, 


shouldComponentUpdate (nextProps) { 
return this.props.value !== nextProps.value; 


但 当 比 较 的 是 对 象 的 话 就 会 出 现 问题 : 


// 假设 this.props.value 为 { foo: 'app' } 
// 架设 nextProps.value A { foo: 'app' }, 
// 虽然 两 者 值 是 一 样 ， 但 由 于 reference 位 置 不 同 ， 所 以 视 为 不 同 。 但 由 于 值 一 样 


this.props.value !== nextProps.value; // true 


使 用 ImmutableJS 


var SomeRecord = Immutable.Record({ foo: null }); 
var x = new SomeRecord(( foo: 'app' }); 

var y = x.set('foo', 'azz'); 

x === y; // false 


在 ES6 中 可 以 使 用 官方 文件 上 的 PureRenderMixin 进行 比较 ， 可 以 让 程式 码 更 


简洁 : 


import PureRenderMixin from 'react-addons-pure-render-mixin'; 
class FooComponent extends React.Component { 
constructor(props) { 
super(props); 
this.shouldComponentUpdate - PureRenderMixin.shouldComponent 
Update.bind(this); 
} 
render() { 
return <div className={this.props.className}>foo</div>; 


WwW 
WwW 


e 


im 


4 


虽然 ImmutableJS 的 引入 可 以 带 来 许多 好 处 和 性 能 的 提升 但 由 于 引入 整体 档案 
较 大 且 较 具 侵 入 性 ， 在 引入 之 前 可 以 自行 评估 看 看 是 否 合适 于 目前 的 专案 。 接 下 来 
我 们 将 在 后 面 的 章节 讲解 如 何 将 ImmutableJS 和 Redux 整合 应 用 到 实务 上 的 
范例 。 
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Flux 基础 概念 与 实战 入 门 


React + FLUX 





随 著 React App 复杂 度 提 升 ， 我 们 会 发 现 常常 需要 从 Parent Component 通过 
props 传递 方法 到 Child Component 去 改变 state tree， 不 但 不 方便 也 难以 管理 ， 
因此 我 们 需要 更 好 的 数据 架构 来 建 置 更 复杂 的 应 用 程序 。Flux 是 Facebook 推出 的 
client-side 应 用 程序 架构 (Architecture) ， 主 要 想 解决 MVC 架构 的 一 些 问 题 。 事 
实 上 ，Flux 并 非 一 个 完整 的 前 端 Framework， 其 特色 在 于 实现 了 Unidirectional 
Data Flow ( 单 向 流 ) 的 数据 流 设计 模式 ， 在 开发 复杂 的 大 型 应 用 程序 时 可 以 更 容 
易 地 管理 state (KA) 。 由 于 React 主要 是 负责 View 的 部 份 ， 所 以 通过 搭配 
Flux-like 的 数据 处 理 架构 ， 可 以 更 好 的 去 管理 我 们 的 state (KA) ， 处 理 复 杂 的 
使 用 者 互动 (例如 : Facebook 同时 要 维护 使 用 者 是 否 点 赞 、 点 击 相片 ， 是 否 有 新 
讯息 等 状态 ) 。 


由 于 原始 的 Flux 架构 在 实现 上 有 些 部 分 可 以 精简 和 改善 ， 在 实际 操作 上 我 们 通常 
会 使 用 开发 者 社 群 开发 的 Flux-like 相关 的 架构 实现 (例如 : Redux ` Alt ^ Reflux 
F) 。 不 过 这 边 我 们 主要 会 使 用 ine 本 身 提 供 Dispatcher API SA 

(可 以 想 成 是 一 个 pub/sub 处 理 器 ， 通 过 broadcast 将 payloads 传 给 注册 的 
callback function) 并 搭配 NodeJS 7 EventEmitter 模块 去 完成 Flux 架构 的 
实现 。 


Flux HAT? 


Action creators are helper 
methods, collected into a library, 
that create an action from method 
parameters, assign it a type and 
provide it to the dispatcher. 


Dispatcher View 


Every action is sent to all After stores update themselves in response to 
stores via the callbacks the an action, they emit a change event. 
stores register with the 


2 Special views called controller-views, listen for 
dispatcher. 


change events, retrieve the new data from the 
stores and provide the new data to the entire 
tree of their child views. 





在 Flux Unidirectional Data Flow (单项 流 ) 世界 里 有 四 大 主角 ， 分 别 负 责 不 同 对 应 
的 工作 : 


1. actions / Action Creator 


action 负责 定义 所 有 改变 state (KA) 的 行为 ， TULA Ra BR T EA 
的 各 种 功能 ， 若 你 想 改变 state 你 只 能 发 action » 7€: X& action 可 以 是 同步 
非 同步 。 例 如 : 新 增 代 办 事项 ， 调 用 非 同步 AP| 获取 数据 。 


实际 操作 上 我 们 会 分 成 action 和 Action Creator » action 为 描述 行为 的 
object (物件 ) > Action Creator 将 action 送 给 dispatcher 。 一 般 来 说 符合 
Flux Standard Action 的 action 会 如 以 下 范例 代码 ， 具 备 type KE Fl Pp AR 
发 的 行为 。 而 payload 则 是 所 夹带 的 数据 : 


// action 
const addTodo = { 
type: 'ADD_TODO', 
payload: { 
text: 'Do something. ' 


AppDispatcher .dispatch(addTodo) ; 


当 发 生 rejected Promise 情况 : 


{ 

type: 'ADD_TODO', 
payload: new Error(), 
error: true 


} 


2. Dispatcher 


Dispatcher Æ Flux 架构 的 核心 ， 每 个 App 只 有 一 个 Dispatcher， 提 供 
API 让 store 可 以 注册 callback function ， 并 负责 向 所 有 store Rik 
action 事件 。 在 本 范例 中 我 们 使 用 Facebook 提供 的 Dispatcher API， 其 内 建 
有 dispatch 和 subscribe 方法 。 


3. Stores 


一 个 App 通常 会 有 多 个 store 负责 存放 业务 逻辑 ， 根 据 不 同业 务 会 有 不 同 

store， 例 如 : TodoStore ` RecipeStore » store 负责 操作 和 储存 数据 并 提供 
view 使 用 listener (监听 器 ) ， 若 有 数据 更 新 即 会 触发 更 新 。 值 得 注意 
的 是 store 只 提供 getter API 读 取 数 据 ， 若 想 改变 state 一 律 发 送 

action ° 


4. Views (Controller Views ) 


这 部 份 是 React 负责 的 范畴 ， 负 责 提 供 监 听 事 件 的 _ callLback 
function ， 当 事件 发 生 时 重新 取得 数据 并 重 绘 View 。 


Flux 流程 回顾 


Dispatcher 





Flux 架构 前 置 作业 : 


. Stores Dispatcher 注册 callback， 当 数据 改变 时 告知 Stores 

. Controller Views Stores 取得 初始 数据 

. Controller Views 将 数据 给 Views #2 à UI 

. Controller Views store 注册 listener > 3 Zt 45 rx & 8 44% Controller Views 


KR O N > 


Flux 与 使 用 者 互动 运作 流程 : 


1. 使 用 者 和 App 互动 ， 触 发 事件 ，Action Creator 发 送 actions 给 Dispatcher 

2. Dispatcher 依 序 将 action 传 给 store 并 由 action type 判断 合适 的 处 理 方 式 

3. 若 有 数据 更 新 则 会 触发 Controller Views 向 store 注册 的 listener 并 向 store X 
得 更 新 数据 

4. View 根据 Controller Views 的 新 数据 重新 绘制 Ul 


Flux 实战 初 体验 


介绍 完了 整个 Flux 基本 架构 后 ， 接 下 来 我 们 就 来 动手 实践 一 个 简单 Flux 架构 的 
Todo， 让 使 用 者 可 以 在 input 输入 代办 事项 并 新 增 。 


首先 ， 我 们 先 完 成 一 些 开发 的 前 置 作业 ， 先 通过 以 下 指令 在 根 目录 产生 npm 配置 
文件 package.json 


$ npm init 


安装 相关 包 (包含 开发 环境 使 用 的 包 ) 


$ npm install --save react react-dom flux events 


$ npm install --save-dev babel-core babel-eslint babel-loader ba 
bel-preset-es2015 babel-preset-react eslint eslint-config-airbnb 
eslint-loader eslint-plugin-import eslint-plugin-jsx-ai11y eslin 
t-plugin-react html-webpack-plugin webpack webpack-dev-server 


安装 好 后 我 们 可 以 设计 一 下 我 们 的 文件 夹 结构 ， 首 先 我 们 在 根 目录 建 立 src c X 
置 script 的 source ° Æ components 文件 夹 中 我 们 会 放置 所 有 
components 【个 别 元 件 文件 夹 中 会 用 index.js 输出 元 件 ， 让 引入 元 件 更 简 
$) ， 另 外 还 有 actions ^ constants ^ dispatcher ^ stores ， 其 余 配 
置 文件 则 放置 于 根 目 录 下 。 


p» src 

C3 actions 

C3 components 

C3 constants 

C3 dispatcher 

C3 stores 
index.html 


9 . ww wy 


index.js 
[3 .babelrc 
[3 .eslintrc 
package.json 


webpack.config.js 


接 下 来 我 们 参考 上 一 章 设 定 一 下 开发 文档 
( .babelrc ^ .eslintrc ^ webpack.config.js ) 。 这 样 我 们 就 完成 了 开发 
环境 的 设 定 可 以 开始 动手 实践 React Flux 应 用 程序 了 ! 


HTML Markup : 


<!DOCTYPE html» 
«html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>TodoFlux</title> 
</head> 
<body> 
<div id="app"></div> 
</body> 
</html> 


以 下 为 src/index.js 完整 代码 ， 安 排 了 父 component 和 在 HTML Markup 4& 
入 位 置 : 


import React from 'react'; 

import ReactDOM from 'react-dom'; 

import TodoHeader from './components/TodoHeader '; 
import TodoList from './components/TodoList'; 


class App extends React.Component { 
constructor(props) { 
super(props); 
this.state = {}; 


} 
render() { 
return ( 
<div> 
<TodoHeader /> 
<TodoList /> 
</div> 
); 
J 


ReactDOM.render(«App /», document.getElementById('app')); 


通常 实际 操作 上 我 们 会 开 一 个 constants 文件 夹 存放 config 或 是 


党 


actionTypes 数 。 以 下 是 src/constants/actionTypes.js 


export const ADD_TODO = 'ADD_TODO'; 


在 这 个 范例 中 我 们 继承 了 Facebook 提供 的 Dispatcher API (主要 是 继承 了 
dispatch ^ register 和 subscribe 的 方法 ) ， 打 造 自己 的 
DispatcherClass， 当 使 用 者 触发 handleAction() 4 dispatch 出 事件 。 以 下 
是 src/dispatch/AppDispatcher.js 


// Todo app dispatcher with actions responding to both 
// view and server actions 
import { Dispatcher } from 'flux'; 


class DispatcherClass extends Dispatcher { 
handleAction(action) { 
this.dispatch(( 
type: action.type, 
payload: action.payload, 
3); 


const AppDispatcher - new DispatcherClass(); 


export default AppDispatcher; 


以 下 是 我 们 利用 AppDispatcher 打造 的 Action Creator 由 handleAction 
负责 发 出 传 入 的 action ， 完 整 代码 如 src/actions/todoActions.js 


import AppDispatcher from '../dispatcher/AppDispatcher'; 
import { ADD_TODO } from '../constants/actionTypes'; 


export const TodoActions = { 
addTodo(text) { 
AppDispatcher .handleAction({ 
type: ADD_TODO, 
payload: { 
text, 
ty 
3): 
tr 
3 


Store 主要 是 负责 数据 以 及 业务 逻辑 处 理 ， 我 们 继承 了 events 模块 的 
EventEmitter ， 当 action 传 入 AppDispatcher.register 的 处 理 范 
后 ， 根 据 action type 选择 适合 处 理 的 store 进行 处 理 ， 处 理 完 后 通过 
emit 方法 发 出 事件 让 监听 的 Views Controller 知道 。 以 下 是 


src/stores/TodoStore.js 


= 


import AppDispatcher from '../dispatcher/AppDispatcher'; 
import { ADD_TODO } from '../constants/actionTypes'; 
import { EventEmitter } from 'events'; 


const store = { 
todos: [], 
editing: false, 


e 


class TodoStoreClass extends EventEmitter { 

addChangeListener(callback) { 
this.on(ADD_TODO, callback); 

} 

removeChangeListener (callback) { 
this.removeListener(ADD_TODO, callback); 

} 

getTodos() { 
return store.todos; 


const TodoStore = new TodoStoreClass(); 


AppDispatcher.register((action) -» ( 
switch (action.type) ( 

case ADD TODO: 
store.todos.push(action.payload.text); 
TodoStore.emit(ADD TODO); 
break; 

default: 
return true; 


j 


return true; 


3); 


export default TodoStore; 


在 这 个 React Flux 范例 中 我 们 把 View 和 Views Controller 整合 在 一 起 。 在 
TodoHeader 中 ， 我 们 主要 任务 是 让 使 用 者 可 以 通过 input 新 增 代办 事项 。 使 
用 者 输入 文字 在 _ input 时 会 触发 onchange 事件 ， 进 而 更 新 内 部 的 state * 
当 使 用 者 按 了 送出 钮 就 会 触发 onAdd 事件 ， dispatch 出 addTodo event ° 


以 下 是 src/components/TodoHeader.js 完整 范例 : 


import React, { Component } from 'react'; 
import { TodoActions } from '../../actions/todoActions'; 


class TodoHeader extends Component { 
constructor(props) { 
super(props); 
this.onChange = this.onChange.bind(this); 
this.onAdd - this.onAdd.bind(this); 


this.state - ( 
text: '', 
editing: false, 
J; 
D 
onChange(event) { 
this.setState({ 
text: event.target.value, 


3): 


} 
onAdd() { 
TodoActions.addTodo(this.state.text); 


this.setState({ 


text: 7 
3); 
} 
render() { 
return ( 
<div> 
<h1>TodoFlux</h1> 
<div> 
<input 
value={this.state.text} 
type="text" 
placeholder=" 请 输入 代办 事项 " 


onChange={this.onChange} 
E 
«button 
onClick={this.onAdd} 


送出 
</button> 
</div> 
</div> 


); 


export default TodoHeader; 


在 上 面 的 Component 中 我 们 让 使 用 者 可 以 新 增 代办 事项 ， 接 下 来 我 们 要 让 新 增 的 
代办 事项 可 以 显示 。 我 们 在 componentDidMount 设 了 一 个 监听 器 TodoStore 

数据 改变 时 会 去 把 数据 重新 再 更 新 ， 这 样 当 使 用 者 新 增 代办 事项 时 TodoList 就 
会 保持 同步 。 以 下 是 src/components/TodoList.js 完整 代码 : 


import React, { Component } from 'react'; 
import TodoStore from '../../stores/TodoStore'; 


function getAppState() { 
return { 
todos: TodoStore.getTodos(), 
J; 
} 
class TodoList extends Component { 
constructor(props) { 
super (props); 
this.onChange = this.onChange.bind(this); 
this.state = ( 
todos: [], 
J; 
} 
componentDidMount() { 
TodoStore.addChangeListener(this.onChange) ; 
} 
onChange() { 
this.setState(getAppState()); 


J 
render() ( 
return ( 
«div» 
<ul> 
{ 
this.state.todos.map((todo, key) => ( 
«li key={key}>{todo}</1i> 
)) 
} 
</ul> 
</div> 
); 
} 


export default TodoList; 


若 读者 都 有 跟著 上 面 的 步骤 走 完 的 话 ， 最 后 我 们 在 终端 机 的 根 目录 位 置 执行 npm 
start 就 可 以 看 到 整个 成 果 ，YA ! 


TodoFlux 


| 送出 


。 RB 
。 REX 


4 


e 


Cm 


Flux 优势 : 


.让 开发 者 可 以 快速 了 解 整个 App 中 的 行为 

数据 和 业务 逻辑 统一 存放 好 管理 

.让 View 单纯 化 只 负责 UI 的 排版 不 需 负责 state 管理 

. 清楚 的 架构 和 分 工 对 于 复杂 中 大 型 应 用 程序 易于 维护 和 管理 代码 


Flux 43 : 


1. 代码 上 不 够 简洁 
2， 对 于 简单 小 应 用 来 说 稍微 复杂 


以 上 就 是 Flux 的 实战 入 门 ， 我 知道 一 开始 接触 Flux 的 读者 一 定 会 觉得 很 抽象 ， 有 
些 读 者 甚至 会 觉得 这 个 架构 到 底 有 什么 好 处 〈 明 明 感 觉 没 比 MVC 高 明 到 哪 去 或 是 
一 点 都 不 简洁 ) ， 但 如 同上 述 优点 所 说 Flux 设计 模式 的 优势 在 于 清楚 的 架构 和 分 
工 对 于 复杂 中 大 型 应 用 程序 易于 维护 和 管理 代码 。 若 还 是 不 熟悉 的 读者 可 以 跟著 范 
例 多 动手 ， 相 信 慢 慢 就 可 以 体会 Flux 的 特色 。 事 实 上 ， 在 开发 社区 中 为 了 让 Flux 
架构 更 加 简洁 ， 产 生 了 许多 Flux-like 的 架构 和 函 式 库 ， 接 下 来 将 带 读 者 们 进入 目前 
最 热门 的 架构 : Redux 。 


Flux 基础 概念 与 实战 入 门 


延伸 阅读 


. Getting To Know Flux, the React.js Architecture 

. Flux 官方 网 站 

. 从 Flux 与 MVC 的 差异 来 简介 Flux 

. Flux Stores and ES6 

. React and Flux: Migrating to ES6 with Babel and ESLint 

. Building an ES6/JSX/React Flux App — Part 2 — The Flux 

. Question: How to choose between Redux's store and React's state? #1287 


CON OO BP Cc Pn9-— 


. acdlite/flux-standard-action 


(image via devjournal ` facebook ` scotch.io ) 


‘door: 4£ XT] 


| 回首 页 | 上 一 章 : ImmutableJS 入 门 教学 | 下 一 章 : Redux 基础 概念 | 





| 纠 错 、 提 问 或 许愿 | 
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Redux 基础 概念 


7) Redux 


前 面 一 个 章节 我 们 讲解 了 Flux 的 功能 和 用 法 ， 但 在 实务 上 许多 开发 者 较 偏好 的 是 
同 为 Flux-like 但 较为 简洁 且 文 件 丰 富 清楚 的 Redux 当 作 状态 数据 管理 的 架构 。 
Redux 是 由 Dan Abramov 所 发 起 的 一 个 开源 的 library， 其 主要 功能 如 官方 首页 写 
著 : Redux is a predictable state container for JavaScript apps. ° 
Tp BP Redux 希望 能 提供 一 个 可 以 预测 的 state 管理 容器 ， 让 开发 者 可 以 可 以 更 容易 
开发 复杂 的 JavaScript 应 用 程序 (注意 Redux 和 React 并 无 相依 性 ， 只 是 和 
React 可 以 有 很 好 的 整合 ) 。 


Flux/Redux 超级 比 一 比 


从 简单 Flux/Redux 比较 图 可 以 看 出 两 者 之 间 有 些 差 异 : 


Redux 基础 概念 


Data flow 


EJ 
H ed UX Reducer EJ rem 
Coa [ 
Flux tion | h | Stor | 





Redux vs traditional Flux 


在 开始 实际 操作 Redux App 之 前 我 们 先 来 了 解 一 下 Redux 和 Flux 的 一 些 差异 : 


1. 只 使 用 一 个 store 将 整个 应 用 程序 的 状态 (state) 用 对 象 树 (object tree) 的 方式 


储存 起 来 : 


原生 的 Flux 会 有 许多 分 散 的 store 储存 各 个 不 同 的 状态 ， 但 在 redux 中 ， 只 
有 唯一 一 个 store 将 所 有 的 数据 用 对 象 的 方式 包 起 来 。 


只 会 
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//) 4 Flux store 
const userStore = { 


name: 
} 
const todoStore = { 
text: '' 
} 
// Redux 的 单一 store 


const state = { 
userState: { 


name: 

3 

todoState: ( 
text: '' 

} 


2. 唯一 可 以 改变 state 的 方法 就 是 发 送 action， 这 部 份 和 Flux 类 似 ， 但 Redux 
并 没有 像 Flux 设计 有 Dispatcher » Redux 的 action 和 Flux 的 action 都 是 一 
个 包含 type 和 payload 的 对 象 。 


3. Redux 拥有 Flux 所 没有 的 Reducer Reducer 根据 action 的 type 去 执行 对 应 
的 state 4X t 16 8 BA f Reducer。 你 可 以 使 用 switch 或 是 使 用 函数 
mapping 的 方式 去 对 应 处 理 的 方式 。 


4. Redux 拥有 许多 方便 好 用 的 辅助 测试 工具 (例如 : redux-devtools ` react- 
transform-boilerplate) ， 方 便 测试 和 使 用 Hot Module Reload 。 


Redux 核心 概念 介绍 


Redux 基础 概念 


Store 








Initial state received 


Updated on Store change 


event store.dispatch() 


Some component 
action (eg. button 
clicked) 







Component In App Action 


从 上 述 的 图 中 我 们 可 以 看 到 Redux 数据 流 的 模型 大 致 上 可 以 简化 成 : View -> 
Action -> (Middleware) -> Reducer 。 当 使 用 者 和 View 互动 时 会 触发 事件 发 
出 Action， 若 有 使 用 Middleware 的 话 会 在 进入 Reducer 进行 一 些 处 理 ， 当 Action 
进 到 Reducer 时 ，Reducer 会 根据 ，action type 去 mapping 对 应 处 理 的 动作 ， 然 
后 回 传 回 新 的 state。View 则 因为 侦 测 到 state 更 新 而 重 绘 页 面 。 在 这 个 章节 我 们 
讨论 的 是 synchronous (同步 ) 的 情形 ，asynchronous ( 非 同 步 ) 的 状况 会 在 接 下 
来 的 章节 进行 讨论 。 以 下 就 用 官方 网 站 上 的 简单 范例 来 让 大 家 感受 一 下 Redux 的 
整个 使 用 流程 : 


import { createStore } from 'redux'; 


J** 

下 面 是 一 个 简单 的 reducers ， 主 要 功能 是 针对 传 进来 的 action type 判断 并 
回 传 新 的 State 

reducer 规格 : (state，action) => newState 

一 般 而 言 state 可 以 是 primitive^array 或 object 甚至 是 ImmutableJ 
S Data。 但 要 留意 的 是 不 能 修改 到 原来 的 state ， 
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回 传 的 是 新 的 State。 由 于 使 用 在 Redux 中 使 用 ImmutableJS 有 许多 好 处 ， 
所 以 我 们 的 范例 App 也 会 使 用 ImmutableJS 
7 
function counter (state = 0, action) { 

switch (action.type) { 

case 'INCREMENT': 

return state + 1; 
case 'DECREMENT': 

return state - 1; 
default: 

return state; 


// 创建 Redux store 去 存放 App 的 所 有 state 
// store 的 可 用 API { subscribe, dispatch, getState } 
let store = createStore(counter); 


// 可 以 使 用 Subscribe() 来 订阅 state 是 否 更 新 。 但 实务 通常 会 使 用 react-r 
edux X $3& React 和 Redux 
store.subscribe(() => 

console.log(store.getState()); 


); 

// 若 想 改变 state » —4£ X action 
store.dispatch({ type: 'INCREMENT' }); 
Mi al 

store.dispatch({ type: 'INCREMENT' }); 
EVE 2 

store.dispatch({ type: 'DECREMENT' }); 
"d al 


Redux API AT] 


1. createStore : createStore(reducer, [preloadedState], [enhancer]) 


我 们 知道 在 Redux 中 只 会 有 一 个 store » HF # store 时 我 们 会 使 用 
createStore 这 个 API 来 创建 store。 第 一 个 参数 放 入 我 们 的 reducer 或 
是 有 多 个 reducers combine (使 用 combineReducers ) 在 一 起 的 


rootRuducers 。 第 二 个 参数 我 们 会 放 入 希望 预先 载 入 的 state 例如 : 
user session 等 。 第 三 个 参数 通常 会 放 入 我 们 想 要 使 用 用 来 增强 Redux 功能 的 
middlewares ， 若 有 多 个 middlewares 的 话 ， 通 常会 使 用 
applyMiddleware 来 整合 。 


2. Store 
属于 Store 的 四 个 方法 : 


o getState() 

o dispatch(action) 

o subscribe(listener) 

o replaceReducer(nextReducer) 


关于 Store 重点 是 要 知道 Redux 只 有 一 个 Sotre 负责 存放 整个 App 的 
State， 而 唯一 能 改变 State 的 方法 只 有 发 送 action ° 


3. combineReducers : combineReducers(reducers) 


combineReducers Ye 多 个 reducers 进行 整合 并 回 传 一 个 Function > R, 
们 可 以 将 reducer 适度 分 割 


4. applyMiddleware : applyMiddleware(...middlewares) 
官方 针对 Middleware 进行 说 明 


It provides a third-party extension point between dispatching an action, 
and the moment it reaches the reducer. 


% A NodeJS 的 经 验 的 读者 ， 对 于 middleware 概念 应 该 不 陌生 ， 让 开发 者 可 
以 在 req 和 res 之 间 进 行 一 些 操 作 。 在 Redux 中 Middleware 则 是 扮演 action 


到 达 reducer 前 的 第 三 方 扩 充 。 而 applyMiddleware 可 以 将 多 个 
middlewares 整合 并 回 传 一 个 Function， 便 于 使 用 。 


若是 你 要 使 用 asynchronous 〈 非 同步 ) 的 行为 的 话 需要 使 用 其 中 一 种 
middleware : redux-thunk ` redux-promise 或 redux-promise-middleware ° 
这 样 可 以 让 你 在 actions 中 dispatch Promises «3E function ° 
asynchronous ( 非 同步 ) 运作 方式 就 如 同 下 图 所 示 : 


Giphy API 















mapDispatchToProps Superagent 








Action 


requestGifs() action creator REQUEST GIFS 


{ type: REQUEST. GIFS, payload: data } | Promise 


react-promise middleware 


Resolved promise 







SearchBar 





«App /> component 


Reducer 


GifsReducer 


eT 
S 





mapStateToProps 





Store 


. bindActionCreators : bindActionCreators(actionCreators, dispatch) 


bindActionCreators 可 以 将 actionCreators 和 dispatch 绑 定 ， 并 回 传 
一 个 Function 或 Object， 让 程序 更 简洁 。 但 若是 使 用 react-redux 可 以 用 
connect 让 dispatch 行为 更 容易 管理 


. compose: compose(...functions) 


compose 可 以 将 function 由 右 到 左 合并 并 回 传 一 个 Function， 如 官网 范例 所 
DEM 


import ( createStore, combineReducers, applyMiddleware, com 
pose } from 'redux' 

import thunk from 'redux-thunk' 

import DevTools from './containers/DevTools' 

import reducer from '../reducers/index' 


const store = createStore( 
reducer, 
compose( 
applyMiddleware(thunk), 
DevTools.instrument() 


H 


J LL 人 
Redux 2844 1R 


以 上 介绍 了 Redux 的 基础 概念 ， 若 是 读者 觉得 还 是 有 点 抽 旬 的 话 也 没关系 ， 在 下 
一 个 章节 我 们 将 实际 带 大 家 开发 一 个 整合 React ^ Redux 和 ImmutableJs 
的 TodoApp ° 


延伸 阅读 


. Redux 官方 网 站 

. Redux% ży 3: $& —— Single Source of Truth 
. Presentational and Container Components 
. 48 M Redux E 224% #4 React M 

. Using redux 


O A O N > 


(image via githubusercontent ` makeitopen ` css- 
tricks ` tighten ` tryolabs ` facebook ` JonasOhlsson ) 


:door: 任意 门 
| 回首 页 | 上 一 章 : Flux 基础 概念 与 实战 入 门 | 下 一 章 : Redux 实战 入 门 | 


| 纠 错 、 提 问 或 许愿 | 


113 


Redux 实战 入 门 


上 一 节 我 们 了 解 了 Redux 基本 的 概念 和 特性 后 ， 本 章 我 们 要 实际 动手 用 Redux ^ 
React Redux 结合 ImmutableJS 开发 一 个 简单 的 Todo 应 用 。 话 不 多 说 ， 那 就 让 让 
我 们 开始 吧 ! 


以 下 这 张 图 表示 了 整个 React Redux App 的 数据 流程 图 (使 用 者 与 View 互动 => 
dispatch 出 Action => Reducers 依据 action type 分 配 到 对 应 处 理 方 式 ， 回 传 新 的 
state => 通过 React Redux 传送 给 React > React 重新 绘制 View) 


react-redux 


Application state 





Action 





Action 
Redux 


动手 创作 React Redux ImmutableJS TodoApp 


在 开始 创作 之 前 我 们 先 完 成 一 些 开发 的 前 置 作业 ， 先 通过 以 下 指令 在 根 目录 产 生 
npm 配置 文件 package.json 


$ npm init 


安装 相关 包 (包含 开发 环境 使 用 的 包 ) 


$ npm install --save react react-dom redux react-redux immutable 
redux-actions redux-immutable 


$ npm install --save-dev babel-core babel-eslint babel-loader ba 
bel-preset-es2015 babel-preset-react eslint eslint-config-airbnb 
eslint-loader eslint-plugin-import eslint-plugin-jsx-ai11y eslin 
t-plugin-react html-webpack-plugin webpack webpack-dev-server 


安装 好 后 我 们 可 以 设计 一 下 我 们 的 文件 夹 目录 结构 ， 首 先 我 们 在 根 目录 建立 

src ， 放 置 script 的 source 。 在 components 文件 夹 目录 中 我 们 会 放置 
所 有 components (个 别 元 件 文件 夹 目录 中 会 用 index.js 输出 元 件 ， 让 引入 
元 件 更 简洁 ) ^ containers (负责 和 store 互动 取得 state) ， 另 外 还 有 
actions 、 constants 、 reducers 、 store ， 其 余 配 置 文件 则 放置 于 根 目 
录 下 。 


大 致 上 的 文件 夹 目 录 结 构 会 长 这 样 : 


Y E react-redux-example 
> C3 dist 
> C3 node modules 
Y E» src 
C3 actions 
» C3 components 
> C3 constants 
> C3 containers 
> C3 reducers 
> C3 store 
index.html 
index.js 
[3 .bablerc 
[3 .eslintrc 
package.json 
README.md 


webpack.config.js 


接 下 来 我 们 参考 上 一 章 设 定 一 下 开发 文档 
( .babelrc ^ .eslintrc ^ webpack.config.js ) 。 这 样 我 们 就 完成 了 开发 
环境 的 设 定 可 以 开始 动手 实践 React Redux 应 用 程式 了 | 


首先 我 们 先 用 Component 之 眼 感 受 一 下 我 们 应 用 程式 ， 将 它 切 成 一 个 个 
Component 。 在 这 边 我 们 设计 一 个 主要 的 Main 包含 两 个 子 
Component: TodoHeader ^ TodoList ° 


TodoHeader 


首先 设计 HTML Markup : 


<!DOCTYPE html» 
«html lang="en"> 
«head» 
«meta charset="UTF-8"> 
<title>Redux Todo</title> 
</head> 
<body> 
<div id="app"></div> 
</body> 
</html> 


在 编写 src/index.js 之 前 ， 我 们 先 说明 整 合 react-redux 的 用 法 。 从 以 下 
这 张 图 可 以 看 到 react-redux Æ React 和 Redux 间 的 桥梁 ， 使 用 
Provider ^ connect 去 连结 store 和 React View ° 


Data flow with react-redux 





Redux using react-redux 


事实 上 ， 整 合 了 react-redux 后 ， 我 们 的 React App 就 可 以 解决 传统 跨 
Component 之 前 传递 state 的 问题 和 困难 。 只 要 通过 Provider 就 可 以 让 每 个 
React App 中 的 Component ÆA store 中 的 state， 非 常 方便 ( 接 下 来 我 们 也 会 
更 详细 说 明 Container/Component、 connect 的 用 法 ) 。 


WITHOUT REDUX WITH REDUX 





© COMPONENT INITIATING CHANGE 


以 下 是 src/index.js 完整 代码 : 


import React from 'react'; 

import ReactDOM from 'react-dom'; 
import ( Provider ) from 'react-redux'; 
import Main from './components/Main'; 
import store from './store'; 


ReactDOM.render( 
«Provider store={store}> 
«Main /» 
</Provider>, 
document.getElementById('app') 


): 


其 中 src/components/Main/Main.js Æ Stateless Component > fi 3t P144 View 
的 进入 点 。 


import React from 'react'; 
import ReactDOM from 'react-dom'; 


import TodoHeaderContainer from '../../containers/TodoHeaderCont 
ainer'; 

import TodoListContainer from '../../containers/TodoListContaine 
La" 


const Main = () => ( 
<div> 
<TodoHeaderContainer /> 
<TodoListContainer /> 
</div> 


); 


export default Main; 


接 下 来 我 们 定义 一 下 Actions 的 部 份 ， 由 于 是 范例 App 所 以 相对 简单 ， 这 边 只 
定义 一 个 todoActions。 在 这 边 我 们 使 用 了 redux-actions， 它 可 以 方便 我 们 使 用 
Flux Standard Action 格式 的 action。 以 下 是 src/actions/todoActions.js % 
整 代 码 : 


import { createAction } from 'redux-actions'; 
import { 

CREATE_TODO, 

DELETE_TODO, 

CHANGE_TEXT, 
} from '../constants/actionTypes'; 


export const createTodo = createAction('CREATE_TODO'); 
export const deleteTodo = createAction('DELETE TODO'); 
export const changeText = createAction('CHANGE_TEXT'); 


我 们 在 src/actions/index.js 将 所 有 actions 输出 


export * from './todoActions'; 


另外 我 们 把 constants 3X $£| components 文件 夹 目 录 中 方便 管理 ， 以 下 是 


src/constants/actionTypes.js 代码 : 


export const CREATE_TODO = 'CREATE_TODO'; 
export const DELETE_TODO = 'DELETE_TODO'; 
export const CHANGE_TEXT = 'CHANGE_TEXT'; 


ae 
或 是 可 以 考虑 使 用 keyMirror， 方 便 产 生 与 key 相同 的 常数 
import keyMirror from 'fbjs/lib/keyMirror'; 


export default keyMirror({ 
ADD_ITEM: null, 
DEER RE Siem nn 
DEL ETEsA EE nus 
FILTER ITEMS null 


3); 
*/ 


it 5X Actions 后 我 们 来 讨论 一 下 Reducers 的 部 份 。 在 讨论 Reducers 之 前 我 们 先 
来 设 定 一 下 我 们 的 前 端的 数据 结构 ， 在 这 边 我 们 把 所 有 数据 结构 (initialState) 放 
到 src/constants/models.js 中 。 这 边 特别 注意 的 是 由 于 Redux 中 有 一 个 重要 


特性 是 State is read-only ， 也 就 是 说 更 新 当 reducers 3t $| action 只 会 回 传 
新 的 state 不 会 更 改 到 原 有 的 state。 因 此 我 们 会 在 整个 Redux App 中 使 用 
ImmutableJS 让 整个 数据 流 维 持 在 Immutable 的 状态 ， 也 可 以 提升 程式 开发 
上 的 性 能 和 避免 不 可 预期 的 副作用 。 


以 下 是 src/constants/models.js 完整 代码 ， 其 设 定 了 TodoState 的 数据 结构 
并 使 用 fromJS() 转 成 Immutable 


import Immutable from 'immutable'; 


export const TodoState = Immutable. fromJS({ 


atodos S Is 

Utodo': 4 
qd 
text: DU 


updatedAt: '', 
completed: false, 
J 
3): 


接 下 来 我 们 要 讨论 的 是 Reducers 的 部 份 ， 在 todoReducers 中 我 们 会 根据 接收 
到 的 action 进行 mapping 到 对 应 的 处 理子 数 并 传 入 夹带 的 payload 数据 (这 边 
我 们 使 用 redux-actions 来 进行 mapping， 使 用 上 比 传统 的 switch 更 为 简洁 ) © 
Reducers 接收 到 action 的 处 理 方式 为 (initialState, action) => 

newState ， 最 终 会 回 传 一 个 新 的 state， 而 非 更 改 原来 的 state， 所 以 这 边 我 们 使 
用 ImmutableJS 。 


import { handleActions } from 'redux-actions'; 
import { TodoState } from '../../constants/models'; 


import { 
CREATE_TODO, 
DELETE_TODO, 
CHANGE_TEXT, 
} from '../../constants/actionTypes'; 


const todoReducers = handleActions({ 
CREATE_TODO: (state) => { 
let todos = state.get('todos').push(state.get('todo')); 
return state.set('todos', todos) 
ty 
DELETE_TODO: (state, { payload }) => ( 
state.set('todos', state.get('todos').splice(payload.index, 1 
)) 


), 
CHANGE TEXT: (state, ( payload }) => ( 


state.merge(( 'todo': payload }) 


) 
), TodoState); 


export default todoReducers; 


加 


import { handleActions } from 'redux-actions'; 
import UiState from '../../constants/models'; 


export default handleActions({ 
SHOW: (state, { payload }) => ( 
state.set('todos', payload.todo) 


), 
}, UiState); 


虽然 Redux 本 身 仅 会 有 一 个 store， 但 redux 本 身 有 提供 了 combineReducers 
可 以 让 我 们 切割 我 们 state 方便 维护 和 管理 。 实 上 ，state 的 规划 也 是 一 们 学 问 ， 通 
常 需要 不 断 地 实践 和 工作 团队 讨论 才能 找到 比较 好 的 方式 。 不 过 这 边 要 注意 的 是 我 


们 改 使 用 了 redux-immutable 的 combineReducers 这 样 可 以 确保 我 们 的 
state 维持 在 Immutable 的 状态 。 


由 于 Redux 官方 也 没有 特别 明确 或 严谨 的 规范 。 在 一 般 情 况 我 会 将 reducers 分 为 
data 和 单纯 和 Ul 有关 的 ui state。 但 由 于 这 边 是 比较 简单 的 例子 ， 我 们 最 终 


只 使 用 到 src/reducers/data/todoReducers.js ° 


import { combineReducers } from 'redux-immutable'; 
import ui from './ui/uiReducers';// import routes from './routes 


la 
, 


import todo from './data/todoReducers';// import routes from './ 
routes'; 


const rootReducer = combineReducers({ 
todo, 


3): 


export default rootReducer; 


还 记得 我 们 上 面 说 明 React Redux 之 前 的 桥梁 时 有 提 到 的 store 3? 现在 我 们 要 更 
仔细 地 去 设计 store ， 我 们 这 边 使 用 到 了 redux 其 中 两 个 API : 
applyMiddleware、createStore。 分 别 可 以 产生 store 和 挂 载 我 们 要 使 用 的 
middleware (这 边 我 们 只 使 用 到 redux-logger 方便 我 们 除 错 ) 。 注 意 我 们 
initialState 也 是 维持 在 Immutable 的 状态 。 


import { createStore, applyMiddleware } from 'redux'; 
import createLogger from 'redux-logger'; 

import Immutable from 'immutable'; 

import rootReducer from '../reducers'; 


const initialState = Immutable.Map(); 


export default createStore( 

rootReducer, 

initialState, 

applyMiddleware(createLogger({ stateTransformer: state => stat 
e.toJS() })) 
); 


通过 src/store/index.js 输出 configureStore : 


export { default } from './configureStore'; 


讲解 完 架 构 层 面 的 议题 ， 终 于 我 们 来 到 了 View 的 部 份 。 加 油 ， 距 离 我 们 终点 也 不 
ay! 在 开始 讨论 Component 的 部 份 之 前 我 们 先 来 研究 一 下 


react-redux 所 提供 的 API connect 将 props 传 给 Component， 其 用 法 如 下 : 


connect([mapStateToProps], [mapDispatchToProps], [mergeProps], 
[options ] ) 


在 我 们 的 范例 App 中 我 们 只 会 先 用 到 前 两 个 参数 ， 第 三 个 参数 会 在 之 后 的 例子 里 用 
到 。 第 一 个 参数 mapStateToProps 是 一 个 让 开发 者 可 以 从 store Rik MZ state 并 
当做 props 往 下 传 的 功能 ， 第 二 个 参数 则 是 将 dispatch 行为 封装 成 函数 顺 着 props 
可 以 方便 往 下 传 和 调用 。 


以 下 是 src/components/TodoHeader/TodoHeader.js 的 部 份 : 


import React from 'react'; 

import ReactDOM from 'react-dom'; 

import ( connect ) from 'react-redux'; 

import TodoHeader from '../../components/TodoHeader ' ; 


// 将 欲 使 用 的 actions 引入 
import { 
changeText, 
createTodo, 
} trom 7. 7actrons 3 


const mapStateToProps = (state) => (( 
// JK store 取得 todo state 
todo: state.getIn(['todo', 'todo']) 
3): 


const mapDispatchToProps - (dispatch) -» (( 
// 当 使 用 者 在 input 输入 数据 值 即 会 触发 过 个 函数 ， 发 出 changeText actio 
n 并 附 上 使 用 者 输入 内 容 event.target.value 
onChangeText: (event) => ( 
dispatch(changeText({ text: event.target.value })) 


), 
// 当 使 用 者 按 下 送出 时 ， 发 出 createTodo action 并 清空 input 
onCreateTodo: () => { 
dispatch(createTodo()); 
dispatch(changeText({ text: '' })); 
} 
}); 


export default connect( 
mapStateToProps, 
mapDispatchToProps, 

)(TodoHeader); 


// 开始 建设 Component 并 使 用 connect 进来 的 props 并 绑 定 事件 (onchang 
e、onClick) 。 注 意 我 们 的 state 因为 是 使 用 “ImmutableJS ”所 以 要 用 `get( 
) PAi 
const TodoHeader - (( 
onChangeText, 
onCreateTodo, 
todo, 
JN 
«div» 
«hi»TodoHeaderc/hi» 
<input type="text" value={todo.get('text')} onChange={onChan 
geText} /> 
«button onClick={onCreateTodo}> Hi «/button» 
«/div» 


); 


export default TodoHeader; 


以 下 是 src/components/TodoList/TodoList.js 的 部 份 : 


import React from 'react'; 

import ReactDOM from 'react-dom'; 

import { connect } from 'react-redux'; 

import TodoList from '../../components/TodoList'; 


import { 


deleteTodo, 
te OMe \ ey 2 aeris: 


const mapStateToProps = (state) => ({ 
todos: state.getIn(['todo', 'todos']) 


3); 


// 由 Component 传 进 欲 删除 元 素 的 index 
const mapDispatchToProps = (dispatch) => ({ 
onDeleteTodo: (index) => () => ( 
dispatch(deleteTodo({ index })) 
) 
3); 


export default connect( 
mapStateToProps, 
mapDispatchToProps, 

)(TodoList); 


// Component 部 分 值 的 注意 的 是 todos state 是 通过 map function 去 迭代 
出 元 素 ， 由 于 要 让 React JSX Tia RH RAMA event state 的 immuta 
ble， 所 以 需 使 用 toJS() 转换 component of array: 
const TodoList = ({ 
todos, 
onDeleteTodo, 
ae aC 
<div> 
<ul> 
t 
todos.map((todo, index) => ( 
<li key={index}> 
{todo.get('text')} 
«button onClick={onDeleteTodo( index) }>X</button> 
</li> 
)).toJS() 
} 
</ul> 
</div> 


): 


export default TodoList; 


若是 一 切 顺利 的 话 就 可 以 在 浏览 器 上 看 到 自己 努力 的 成 果 | 


(因为 我 们 有 使 用 


redux-logger 所 以 打开 console 会 看 到 action 和 state 的 变化 情形 ， 但 记得 在 


production 环境 要 拿 掉 ) 


TodoHeader 


。 BEX x 


x à] Elements Console Sources Network Timeline Profiles Application Security Audits Redux React 





© Ww  chrome-extension//gb...pfallí w (| Preserve log 
I next state b Object (todo: Object) 
Y action @ 10:10:51.918 CHANGE TEXT 
| tate > object (todo: Object) 
action b object (type: "CHANGE TEXT", payload: Object} 
next state b Object (todo: Object} 
Y action @ 10:10:52.200 CHANGE TEXT 
| F ate b Object (todo: Object) 
action b Object (type: "CHANGE TEXT", payload: Object} 
next state b Object (todo: Object} 
Y action @ 10:10:52.472 CHANGE TEXT 
| prev state b object {todo: Object) 
action b object (type: "CHANGE TEXT", payload: Object} 
| next state > object (todo: Object} 
T action @ 10:10:53.287 CHANGE TEXT 
prev state b Object (todo: Object) 
action b object (type: "CHANGE TEXT", payload: Object} 
next state » Object (todo: Object) 
action @ 10:10:53.444 CHANGE TEXT 


bg ft = 上 = 


prev state > Object (todo: Object} 
action b Object (type: "CHANGE TEXT", payload: Object} 


next state b object (todo: Object} 


总 结 


TS 





index bundle.js:31187 
index bundle.js:31199 


index bundle.js:31203 
index bundle.js:31211 
index bundle.js:31187 
index bundle.js:31199 
index bundle.js:31203 
index bundle.js:31211 
index bundle.js:31187 
index bundle.js:31199 
index bundle.js:31203 
index bundle.js:31211 


index bundle.js:31187 
index bundle.js:31199 


index bundle.js:31203 
index bundle.js:31211 
index bundle.js:31187 
index bundle.js:31199 
index bundle.js:31203 
index bundle.js:31211 


以 上 就 是 Redux 实战 入 门 ， 对 于 第 一 次 自己 动手 写 Redux 的 朋友 可 能 会 需要 多 练 
习 几 次 ， 多 体会 整个 架构 。 在 接 下 来 的 章节 我 们 将 优化 我 们 的 React Redux 


TodoApp， 让 它 可 以 有 更 清晰 好 维护 的 架构 。 


延伸 阅读 

1. Redux 官方 网 站 

(image via JonasOhlsson 、 licdn) 
‘door: 任意 门 


| 回首 页 
Components AT] | 





上 一 章 : Redux 基础 概念 | 下 一 章 : Container 4 Presentational 


Redux X AAT] 


| 纠 错 、 提 问 或 许愿 | 
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Ch08 Container 5 Presentational 
Components 


1. Container 4 Presentational Components A1] 
m" a E E 
:door: 任意 门 


| 回首 页 | 


Container 4 Presentational Components 
ATT] 


在 聊 完 了 React 和 Redux 整合 后 我 们 来 谈 谈 分 离 Presentational 和 Container 
Component 的 概念 ， 若 你 是 第 一 次 听 过 这 个 名 词 ， 我 建议 你 可 以 先 看 看 Redux 作 
者 Dan AbramovFollow 所 写 的 这 篇 文章 Presentational and Container 
Components ° 


Container 4 Presentational Components 起 级 
m — Ft 


以 下 先 参考 Redux 官网 列 出 两 者 相 异 之 处 : 
1. Presentational Components 


o 用 途 : 怎么 看 事情 《Markup、 外 观 ) 
o 是 否 让 RR Redux 意识 到 : @ 
o 取得 数据 方式 : 从 props 取得 
o 改变 数据 方式 : 从 props 去 呼叫 callback function 
o 写 入 方式 : FARE 
2. Container Components 


o 用 途 : 怎么 做 事情 (采集 数据 ， 更 新 State) 

o 是 否 让 Redux 意识 到 : 是 

o 取得 数据 方式 : 订阅 Redux State (store) 

o 改变 数据 方式 : Dispatch Redux Action 

o 写 入 方式 : 从 React Redux 产生 
从 上 面 的 分 析 读 者 可 以 发 现 ， 两 者 最 大 的 差别 在 于 Component 主要 负责 单 
纯 的 UI $978 3€ » 9 Container 则 负责 和 Redux 的 store 沟通 ， 作 为 
Redux 和 Component 之 间 的 桥梁 。 这 样 的 分 法 可 以 让 程序 ere 责 更 
清楚 ， 所 以 接 下 来 我 们 就 使 用 上 一 章节 的 Redux TodoApp 进行 改造 ， 改 造成 
Container 与 Presentational Components 模式 。 


Container Components 


以 下 是 src/containers/TodoHeaderContainer/TodoHeaderContainer.js 的 
部 份 : 


import { connect } from 'react-redux'; 
import TodoHeader from '../../components/TodoHeader '; 


// 将 欲 使 用 的 actions 引入 
import { 
changeText, 
createTodo, 
Dom 2/7 actions: | 


const mapStateToProps = (state) => ({ 
// M. store 取得 todo state 
todo: state.getIn(['todo', 'todo']) 
3): 


const mapDispatchToProps - (dispatch) -» (( 
// 当 使 用 者 在 input 输入 数据 值 即 会 触发 这 个 函数 ， 发 出 changeText actio 
n 并 附 上 使 用 者 输入 内 容 event.target.value 
onChangeText: (event) => (人 
dispatch(changeText({ text: event.target.value })) 
), 
// 当 使 用 者 按 下 送出 时 ， 发 出 createTodo action 并 清空 input 
onCreateTodo: () => { 
dispatch(createTodo()); 
dispatch(changeText(( text: '' })); 
} 
}); 


export default connect( 
mapStateToProps, 
mapDispatchToProps, 

)(TodoHeader); 


以 下 是 src/containers/TodoListContainer/TodoListContainer.js 的 部 


份 : 


import { connect } from 'react-redux'; 
import TodoList from '../../components/TodoList'; 


import { 
deleteTodo, 
PL trom: 7 c/Zdctions 


const mapStateToProps = (state) => ({ 
todos: state.getIn(['todo', 'todos']) 


3); 


const mapDispatchToProps - (dispatch) -» (( 
onDeleteTodo: (index) => () => ( 
dispatch(deleteTodo({ index })) 
) 
3); 


export default connect( 
mapStateToProps, 


mapDispatchToProps, 
)(TodoList); 


Presentational Components 


以 下 是 src/components/TodoHeader/TodoHeader.js 的 部 份 : 


Container 4 Presentational Components A1] 


import React from 'react'; 
import ReactDOM from 'react-dom'; 


// 开始 建设 Component 并 使 用 connect 进来 的 props 并 绑 定 事件 (onChang 
e^onClick) 。 注 意 我 们 的 state 因为 是 使 用 `ImmutableJS ”所 以 要 用 “get( 
) Su 


const TodoHeader = ({ 
onChangeText, 
onCreateTodo, 
todo, 
jut 
«div» 
«hi»TodoHeaderc/h1» 
<input type="text" value={todo.get('text')} onChange={onChan 
geText} /> 
«button onClick={onCreateTodo}>i% #</button> 
</div> 


); 


export default TodoHeader; 


以 下 是 src/components/TodoList/TodoList.js 的 部 份 : 
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import React from 'react'; 
import ReactDOM from 'react-dom'; 


// Component 部 分 值 的 注意 的 是 todos state 是 通过 map function 去 迭代 
出 元 素 ， 由 于 要 让 React ISX 可 以 泻 染 并 保持 传 入 触发 event state 的 immuta 
ble， 所 以 需 使 用 toJS() 转换 component of array» 

// 由 Component 传 进 欲 删除 元 素 的 index 


const TodoList = ({ 
todos, 
onDeleteTodo, 
}) ( 
<div> 
<ul> 
{ 
todos.map((todo, index) => ( 
<li key={index}> 
{todo.get('text')} 
«button onClick={onDeleteTodo( index ) }>X</button> 
</li> 
)):toJS() 
J 
</ul> 
</div> 


); 


export default TodoList; 


dE 


Cs 


4 


That's it ! 通过 区 分 Container 4 Presentational Components 可 以 让 程序 架构 和 职 
责 更 清楚 了 ! 接 下 来 我 们 将 运用 我 们 所 学 实际 开发 两 个 贴近 生活 的 专案 ， 让 读者 更 
加 熟悉 React 生态 系 如 何 应 用 于 实务 上 。 


延伸 阅读 


1. Presentational and Container Components 


Container 4 Presentational Components A1] 


2. Redux Usage with React 
3. React Higher Order Components in depth 
4. React higher order components 


‘door: 任意 门 


| 回首 页 | 上 一 章 : Redux 实战 入 门 | 下 一 章 : 用 React + Router + Redux + 
ImmutableJS 5 — ^ Github 查询 应 用 | 


| 纠 错 、 提 问 或 许愿 | 
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Ch09 用 React + Router + Redux + 
ImmutableJS 5 —^ Github 和 查询 应 用 


1. 用 React + Router + Redux + ImmutableJS 5 —^ Github 查询 应 用 
a a E B 
‘door: 任意 门 


| 回首 页 | 


用 React + Router + Redux + ImmutableJS 
5 —^* Github 查找 应 用 


学 了 一 身 本 领 后 ， 本 章 将 带 大 家 完成 一 个 单 页 式 应 用 程序 (Single Page 
Application) ， 集 成 React + Redux + ImmutableJS + React Router 搭配 Github 
API 制作 一 个 简单 的 Github 用 户 查找 应 用 ， 实 际 体验 一 下 开发 React App 的 感 


SA 


o 


d 


功能 规划 


让 访客 可 以 使 用 Github ID 搜索 Github 用 户 ， 展 示 Github A P £ ` follower ` 
following ` avatar. url 并 可 以 返回 首页 。 


使 用 技术 


. React 

. Redux 

. Redux Thunk 

. React Router 

. ImmutableJS 

Fetch 

. Material UI 

. Roboto Font from Google Font 

. Github API (https://api.github.com/users/torvalds ) 


OANA OAR WD 一 


不 过 要 注意 的 是 Github API 若 没有 使 用 App key 的 话 可 以 调用 API 的 次 数 会 受 限 


i A RARA 


用 React + Router + Redux + ImmutableJS 写 一 个 Github 查询 应 用 


Github Finder 


Please Key in your Github User Id. ETÀ 





Github Finder 
D Linus Torvalds 
torvalds 


Followers : 41556 





Following : 0 


环境 安装 与 设置 
1. 安装 Node 和 NPM 


2. 安装 所 需 套件 


$ npm install --save react react-dom redux react-redux react-rou 
ter immutable redux-immutable redux-actions whatwg-fetch redux-t 
hunk material-ui react-tap-event-plugin 
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$ npm install --save-dev babel-core babel-eslint babel-loader ba 
bel-preset-es2015 babel-preset-react babel-preset-stage-1 eslint 

eslint-config-airbnb eslint-loader eslint-plugin-import eslint- 
plugin-jsx-aiily eslint-plugin-react html-webpack-plugin webpack 
webpack-dev-server redux-logger 


接 下 来 我 们 先 设 置 一 下 开发 文档 。 


1. 设置 Babel 的 设置 档 : .babelrc 


{ 

"presets": [ 
"es2015", 
reactiu 

], 
Hoke im ee 
} 


2. 设置 ESLint 的 设置 档 和 规则 : .eslintrc 


"extends": "airbnb", 
Mules cr 
"react/jsx-filename-extension": [1, { "extensions": [". 
js", ".jsx"] }], 
i 
"env" :( 
"browser": true, 


3. 设置 Webpack 设置 档 : webpack.config.js 


// 让 你 可 以 动态 插入 bundle 好 的 .js #3] .index.html 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 


const HTMLWebpackPluginConfig = new HtmlwWebpackPlugin({ 


bu boss abu PDadiiv 4 mmiitahin IC 'gE -A Rithih 4—45BÀ 用 
ACLl T Rou ter + REGUX + Imi lutaDieJo 43 - I~ GITNUD 4 之 | 


template: '$( dirname}/src/index.html ， 
filename: 'index.html', 
inject: 'body', 

3); 


// entry 为 进入 点 ， output 为 进行 完 eslint^ babel loader 转译 后 的 
文件 位 置 
module.exports = { 
entry: [ 
"v stc/index.]s', 
], 
output: { 
path: ^$(. dirnamej/dist', 
filename: 'index bundle.js', 


tr 
module: { 
preLoaders: [ 
{ 
ES SS ANS 
loader: 'eslint-loader', 
include: `${__dirname}/src`, 
exclude: /bundle\.js$/ 
} 
], 
loaders: [( 
test: /\.js$/, 
exclude: /node_modules/, 
loader: 'babel-loader', 
query: { 
presets: ['es2015', 'react'], 
tr 
il 
tr 


// 启动 开发 测试 用 server 设置 (不 能 用 在 production) 
devServer: { 
inline: true, 
port: 8008, 
ty 
plugins: [HTMLWebpackPluginConfig], 


iz 
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AGO ! 这 样 我 们 就 完成 了 开发 环境 的 设置 可 以 开始 动手 实 操 Github Finder 
应 用 程序 了 | 


动手 实 操 


1. Setup Mockup 


HTML Markup ( src/index.html ) 


<!DOCTYPE html» 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>GithubFinder</title> 
<link href="https://fonts.googleapis.com/css?family=Rob 
oto:300, 400,500" rel="stylesheet"> 
</head> 
<body> 
<div id="app"></div> 
</body> 
</html> 


设置 webpack.config.js 的 进入 点 src/index.js 


import React from 'react'; 

import ReactDOM from 'react-dom'; 

import { Provider } from 'react-redux'; 

import { browserHistory, Router, Route, IndexRoute } from ' 
react-router'; 

import injectTapEventPlugin from 'react-tap-event-plugin'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemePr 
ovider'; 

import Main from './components/Main'; 

import HomePageContainer from './containers/HomePageContain 
er'; 

import ResultPageContainer from './containers/ResultPageCon 
tainer'; 


J 
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import store from './store'; 


// 引入 react-tap-event-plugin 避免 material-ui onTouchTap ev 
ent 会 遇 到 的 问题 

// Needed for onTouchTap 

// http://stackover flow. com/a/34015469/988941 
injectTapEventPlugin(); 


// 用 react-redux 的 Provider 包 起 来 将 store 传递 下 去 ， 让 每 个 co 
mponents 都 可 以 访问 到 state 
// 这 边 使 用 browserHistory 当做 history， 并 使 用 material-ui 的 
MuiThemeProvider &X€^- components 
// 由 于 这 边 是 简易 的 App 我 们 设计 了 Main 为 母 模 版 ， 其 有 两 个 子 组 件 Hom 
ePageContainer 和 ResultPageContainer， 其 中 HomePageContainer 
为 根 位 置 的 子 组 件 
ReactDOM.render ( 
<Provider store={store}> 
<MuiThemeProvider> 
<Router history={browserHistory}> 
<Route path="/" component={Main}> 
<IndexRoute component={HomePageContainer} /> 
<Route path="/result" component={ResultPageContai 
ner} /> 
</Route> 
</Router> 
</MuiThemeProvider> 
</Provider>, 
document .getElementById('app' ) 
); 


2. Actions 


4 AA i actions 常数 : 
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export const SHOW_SPINNER ' SHOW. SPINNER'; 

export const HIDE SPINNER = 'HIDE SPINNER'; 

export const GET GITHUB INITIATE - 'GET GITHUB INITIATE'; 
export const GET GITHUB SUCCESS = 'GET GITHUB SUCCESS'; 
export const GET GITHUB FAIL - 'GET GITHUB FAIL'; 

export const CHAGE USER ID - 'CHAGE USER ID'; 


现在 我 们 来 规划 我 们 的 actions 的 部 份 ， 这 个 范例 我 们 使 用 到 了 redux- 
thunk 来 处 理 异 步 的 action. ( 若 读 者 对 于 新 的 Ajax LHF HX fetch() 不 熟悉 可 
以 先 参考 这 个 文档 ) 。 以 下 是 src/actions/githubActions.js 完整 代 
码 : 


// 这 边 引 入 了 fetch 的 polyfill， 考 以 让 旧 的 浏览 器 也 可 以 使 用 fetch 
import 'whatwg-fetch'; 
// 引入 actionTypes 常数 
import { 
GET_GITHUB_INITIATE, 
GET_GITHUB_SUCCESS, 
GET_GITHUB_FAIL, 
CHAGE_USER_ID, 
} from '../constants/actionTypes'; 


// 引入 uiActions 的 action 
import ( 
showSpinner, 
hideSpinner, 
} from '"./;uxzActions-'; 


// 这 边 是 这 个 范例 的 重点 ， 要 学 习 我 们 之 前 尚未 讲解 的 异步 action 处 理 方式 
: 不 同 于 一 般 同步 action 直接 发 送 action’ #¥ action 会 回 传 一 个 带 有 

dispatch 参数 的 function， 里 面 使 用 了 Ajax (这 里 使 用 fetch()) 进行 

处 理 

// 一 般 和 API 交互 的 流程 : INIT (开始 请 求 / 夯 出 spinner) -> COMPLET 
E (完成 请 求 /隐藏 spinner) -> ERROR (请 求 失败 ) 

// 这 次 我 们 虽然 没有 使 用 redux-actions 但 我 们 还 是 维持 标准 Flux Stan 
dard Action 格式 :{ type: '', payload: {} } 


export const getGithub = (userId = 'torvalds') => { 
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return (dispatch) => { 
dispatch({ type: GET_GITHUB_INITIATE }); 
dispatch(showSpinner()); 
fetch('https://api.github.com/users/' + userId) 
.then(function(response) { return response.json() }) 
.then(function(json) { 
dispatch({ type: GET_GITHUB_SUCCESS, payload: { dat 
a: json } }); 
dispatch(hideSpinner()); 
}) 
.catch(function(response) { dispatch({ type: GET_GITH 
UB_FAIL }) }); 


} 


// A} actions 处 理 ， 回 传 action 对 象 
export const changeUserId = (text) => ({ type: CHAGE USER I 
D, payload: { userId: text ) }); 


以 下 是 src/actions/uiActions.js 负责 处 理 Ul 的 行为 : 


import { createAction } from 'redux-actions'; 
import { 

SHOW_SPINNER, 

HIDE_SPINNER, 
} from '../constants/actionTypes'; 


// 同步 actions 处 理 ， 回 传 action 对 象 


export const showSpinner = () => ({ type: SHOW_SPINNER}); 
export const hideSpinner = () => ({ type: HIDE_SPINNER}); 


透 过 于 src/actions/index.js 将 我 们 actions 输出 


export * from './uaActions'; 
export * from './githubActions'; 


. Reducers 


接 下 来 我 们 要 来 设置 一 下 Reducers 和 models (initialState 格式 ) 的 设计 ， 注 
意 我 们 这 个 范例 都 是 使 用 ImmutableJS 。 以 下 是 


src/constants/models.js 


import Immutable from 'immutable'; 


export const UiState = Immutable. fromJS({ 
SpinnerVisible: false, 


+); 


// 我 们 使 用 userId 来 暂 存 用 户 ID> data 存放 Ajax 取 回 的 数据 
export const GithubState = Immutable. fromJS({ 

userId: '', 

data: {}, 
}); 


以 下 是 src/reducers/data/githubReducers.js 


import { handleActions } from 'redux-actions'; 
import { GithubState } from '../../constants/models'; 


import { 
GET_GITHUB_INITIATE, 
GET_GITHUB_SUCCESS, 
GET GITHUB FAIL, 
CHAGE USER ID, 
) from '../../constants/actionTypes'; 


const githubReducers = handleActions({ 
// 当 用 户 按 送出 按钮 ， 发 出 GET GITHUB SUCCESS action 时 将 接收 到 
的 数据 merge 
GET_GITHUB_SUCCESS: (state, { payload }) => ( 
state.merge({ 
data: payload.data, 
n 
), 
// 当 用 户 输入 用 户 ID XH CHAGE USER ID action 时 将 接收 到 的 数 
i$ merge 
CHAGE USER ID: (state, { payload }) => ( 
state.merge({ 
'userId': 
payload.userId 
}) 


), 
}, GithubState); 


export default githubReducers; 


以 下 是 src/reducers/ui/uiReducers.js 


import { handleActions } from 'redux-actions'; 
import { UiState } from '../../constants/models'; 


import { 
SHOW_SPINNER, 
HIDE_SPINNER, 
) from '../../constants/actionTypes'; 


// Wa fetch 结果 显示 spinner 
const uiReducers = handleActions({ 
SHOW SPINNER: (state) => ( 
state.set( 
'spinnerVisible', 


enue 
) 
), 
HIDE_SPINNER: (state) => ( 
state.set( 
'spinnerVisible', 
false 
) 


), 
}, UiState); 


export default uiReducers; 


将 reduces 使 用 redux-immutable  combineReducers 在 一 起 。 以 下 是 


src/reducers/index.js 


import { combineReducers } from 'redux-immutable'; 

import ui from './ui/uiReducers';// import routes from './r 
outes'; 

import github from './data/githubReducers';// import routes 
from './routes'; 


const rootReducer = combineReducers({ 
ui, 
github, 

}); 


export default rootReducer; 


运用 redux 提供 的 createStore API 把 
rootReducer ^ initialState ^ middlewares 集成 后 创建 出 store。 以 


下 是 src/store/configureSotore.js 


import ( createStore, applyMiddleware } from 'redux'; 
import reduxThunk from 'redux-thunk'; 

import createLogger from 'redux-logger'; 

import Immutable from 'immutable'; 

import rootReducer from '../reducers'; 


const initialState - Immutable.Map(); 


export default createStore( 
rootReducer, 
initialState, 
applyMiddleware(reduxThunk, createLogger({ stateTransform 
er: state => state.toJS() })) 
); 


. Build Component 


终于 我 们 进入 了 View 的 细节 设计 ， 首 先 我 们 先 针 对 母 模 版 ， 也 就 是 每 个 页 面 
都 会 出 现 的 AppBar 做 设计 。 以 下 是 src/components/Main/Main.js 


import React from 'react'; 
// 引入 AppBar 
import AppBar from 'material-ui/AppBar'; 


const Main = (props) => ( 
<div> 
<AppBar 
title="Github Finder" 
showMenuIconButton-[(false) 
[> 
<div> 
{props.children} 
</div> 
</div> 


); 
// 进行 propTypes 验证 


Main.propTypes = { 
children: React.PropTypes.object, 


Hh 


export default Main; 


以 下 是 src/components/HomePage/HomePage. js 


import React from 'react'; 

// 使 用 react-router 的 Link 当做 超 链 接 ， 发 送 userId 4% query 
import { Link } from 'react-router'; 

import RaisedButton from 'material-ui/RaisedButton'; 

import TextField from 'material-ui/TextField'; 

import IconButton from 'material-ui/IconButton'; 

import FontIcon from 'material-ui/FontIcon'; 


const HomePage = ({ 
userId, 
onSubmitUserId, 
onChangeUserId, 
}) => ( 
<div> 
<TextField 
hintText="Please Key in your Github User Id." 
onChange={onChangeUserId} 
/> 
«Link to={{ 
pathname: '/result', 
query: { userId: userId } 
}}> 
«RaisedButton label-"Submit" onClick={onSubmitUserId( 
userId)) primary /> 
«/Link» 
«/div» 


); 


export default HomePage; 


以 下 是 src/components/ResultPage/ResultPage.js ° 4 userId #4% 
props 传 给 <GithubBox /> 


``` javascript 
import React from 'react'; 
import GithubBox from '../../components/GithubBox'; 


const ResultPage = (props) => ( 
<div> 


<GithubBox data={props.data} userId={props.location.query.us 
erId} /> 
</div> 


); 


export default ResultPage; 


以 下 是 `src/components/GithubBox/GithubBox.js` ， 负 责 截取 的 Github 
数据 呈现 : 


``javascript 
import React from 'react'; 
import { Link } from 'react-router'; 
// 引入 material-ui 的 卡片 式 组 件 
import { Card, CardActions, CardHeader, CardMedia, CardTitle, Ca 
rdText } from 'material-ui/Card'; 
// 引入 material-ui 的 RaisedButton 
import RaisedButton from 'material-ui/RaisedButton'; 
// 引入 ActionHome icon 
import ActionHome from 'material-ui/svg-icons/action/home'; 


const GithubBox = (props) => ( 
<div> 
<Card> 
<CardHeader 
title={props.data.get('name' )} 
subtitle={props.userId} 
avatar-(props.data.get('avatar url')) 
/> 
<CardText> 
Followers : {props.data.get('followers' )} 
</CardText> 
<CardText> 
Following : {props.data.get('following' )} 
</CardText> 
<CardActions> 
<Link to="/"> 
<RaisedButton 
label="Back" 


icon={<ActionHome />} 
secondary={true} 
/> 
</Link> 
</CardActions> 
</Card> 
</div> 


); 


export default GithubBox; 


1. Connect State to Component 


最 后 ， 我 们 要 将 Container 和 Component 连接 在 一 起 〈 若 忘记 了 ， 请 先 回去 
复习 Container 与 Presentational Components AT] ! ) 。 以 下 是 


src/containers/HomePage/HomePage.js ， 负 责 将 userld 和 使 用 到 的 事件 
处 理 方法 用 props 传 进 component : 


import { connect } from 'react-redux'; 
import HomePage from '../../components/HomePage' ; 


import { 
getGithub, 
changeUserId, 

fimom ac td os | 


export default connect( 
(state) => (1 
userId: state.getIn(['github', 'userId']), 
3) 
(dispatch) => ({ 
onChangeUserId: (event) => ( 
dispatch(changeUserId(event.target.value)) 
); 
onSubmitUserId: (userId) => () => ( 
dispatch(getGithub(userId)) 
); 
3) 
(stateProps, dispatchProps, ownProps) => { 
const ( userId ) - stateProps; 
const ( onSubmitUserId ) - dispatchProps; 
return Object.assign({}, stateProps, dispatchProps, own 
Props, { 
onSubmitUserId: onSubmitUserId(userId), 
3); 
} 
) (HomePage); 


以 下 是 src/containers/ResultPage/ResultPage.js 


import { connect } from 'react-redux'; 
import ResultPage from '../../components/ResultPage' ; 


export default connect( 
(state) => (1 
data: state.getIn(['github', 'data']) 


3) 
(dispatch) => ({}) 
)(ResultPage); 


2. That's it 


若 一 切 顺利 的 话 ， 这 时 候 你 可 以 在 终端 机 下 $ npm start 指令 ， 然 后 在 
http://localhost:8008 就 可 以 看 到 你 的 努力 成 果 史 1 
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本 章 带 领 读者 们 从 零 开始 集成 React + Redux + ImmutableJS + React Router 搭配 
Github API 制作 一 个 简单 的 Github 用 户 查找 应 用 。 下 一 章 我 们 将 挑战 高 端 应 用 ， 
学 习 Server Side Rendering 方面 的 知识 ， 并 用 React + Redux + 

Node (Isomorphic) 开发 一 个 食谱 分 享 网 站 。 


延伸 阅读 


用 React + Router + Redux + ImmutableJS 写 一 个 Github 查询 应 用 


. Tutorial: build a weather app with React 

. OpenWeatherMap 

. Weather Icons 

. Weather API Icons 

. Material UI 

【翻译 】 这 个 API 很 “迷人 " (新 的 Fetch API) 

. Redux: trigger async data fetch on React view event 
. Github API 

.传统 Ajax GX » Fetch 永生 


OANA AR WD 一 


‘door: 4£ XT] 


| 回首 页 | 上 一 章 : Container 4 Presentational Components AJ] | 下 一 章 : React 
Redux Sever Rendering (Isomorphic JavaScript) AT] | 


| 纠 错 、 提 问 或 许愿 | 


154 


Ch10 实战 教学 : 用 React + Redux + 
Node (Isomorphic JavaScript) 开发 食谱 分 
享 网 站 


1. React Redux Sever Rendering (Isomorphic JavaScript) AT] 


2. 用 React + Redux + Node (Isomorphic JavaScript) 开发 一 个 食谱 分 享 网 站 


‘door: 任意 门 


| 回首 页 | 


React Redux Sever Rendering (Isomorphic JavaScript) AT] 


React Redux Sever 
Rendering (Isomorphic JavaScript) AJ] 


Isomorphic JavaScript 





由 于 可 能 有 些 读 者 没 听 过 Isomorphic JavaScript 。 因 此 在 进 到 开发 React Redux 
Sever Rendering 应 用 程序 的 主题 之 前 我 们 先 来 聊 聊 Isomorphic JavaScript 这 个 议 
Ho 


根据 Isomorphic JavaScript 这 个 网 站 的 说 明 : 


Isomorphic JavaScript Isomorphic JavaScript apps are JavaScript 
applications that can run both client-side and server-side. The backend and 
frontend share the same code. 


Isomorphic JavaScript 系 指 浏 览 器 端 和 服务 器 端 共用 JavaScript 的 代码 。 


另外 ， 除 了 Isomorphic JavaScript 外 ， 读 者 或 许 也 有 听 过 Universal JavaScript 这 
个 用 词 。 那 什么 是 Universal JavaScript 呢 ? 它 和 Isomorphic JavaScript 是 指 一 样 
的 意思 吗 ? 针对 这 个 议题 网 络 上 有 些 开发 者 提出 了 自己 的 观点 : Universal 
JavaScript ` Isomorphism vs Universal JavaScript。 其 中 Isomorphism vs 
Universal JavaScript 这 篇 文章 的 作者 Gert Hengeveld 指出 Isomorphic 
JavaScript 主要 是 指 前 后 端 共用 JavaScript 的 开发 方式 ， 而 Universal 
JavaScript 是 指 JavaScript 代码 可 以 在 不 同 环境 下 运行 ， 这 当然 包含 浏览 器 端 和 
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服务 器 端 ， 甚 至 其 他 环境 。 也 就 是 说 Universal JavaScript 在 意义 上 可 以 涵盖 
i 比 Isomorphic JavaScript siis ' 然而 在 Github 或 是 许多 技术 讨论 上 
会 把 两 者 视 为 同一 件 事情 ， 这 部 份 也 请 读者 留意 。 


Isomorphic JavaScript 的 好 处 


4E FP 46 A SEG | Isomorphic JavaScript 前 我 们 在 进一步 探讨 使 用 Isomorphic 
JavaScript 有 哪些 好 处 ? 在 谈 好 处 之 前 ， 我 们 先 看 看 最 早 Web 开发 是 如 何 处 理 页 
Mis Ae state 管理 ， 还 有 遇 到 哪些 挑战 。 


最 早 的 时 候 我 们 谈论 Web 很 单纯 ， 都 是 由 Server 端 进行 模版 的 处 理 ， 你 可 以 想 成 
lomplale 是 一 个 函数 ， 我 们 发 送 数据 进去 ，template 最 后 产生 一 张 HTML 给 浏览 
器 显示 。 例 如 : Node 使 用 的 (EJS、Jade) 、Python/Django 的 Template 或 替代 
方案 Jinja、PHP 的 Smarty ` Laravel 使 用 的 Blade， 甚 至 是 Ruby on Rails 用 的 
ERB。 都 是 由 后 端 去 render 所 有 数据 和 页 面 ， 前 端 处 理 相 对 单纯 。 


然而 随 着 前 端 工程 的 软件 工程 化 和 用 户 体验 的 要 求 ， 开 始 出 现 各 式 前 端 框架 的 百花 
齐 放 ， 例 如 : Backbone.js ` Ember.js fe Angular.js 等 前 端 MVC (Model-View- 
Controller) 或 MVVM (Model-View-ViewModel) 框架 ， 将 页 面 于 前 端 泻 染 的 不 刷 页 
单 页 式 应 用 程序 (Single Page App) 也 因此 开始 流行 。 


后 端 除了 提供 初始 的 HTML 外 ， 还 提供 API Server 让 前 端 框架 可 以 取得 数据 用 于 
前 端 template » X 48 437 $ di ViewModel/Presenter 来 处 理 ， 前 端 template 只 处 
理 简 单 的 是 否 显 示 或 是 元 素 和 迭代 的 状况 ， 如 下 图 所 示 : 


Client-side MVC 


Your app API 


然而 前 端 泻 染 template 虽然 有 它 的 好 处 但 也 遇 到 一 些 问题 包括 性 能、SEO 等 议 
题 。 此 时 我 们 就 开始 思考 Isomorphic JavaScript 的 可 能 性 : 为 什么 我 们 不 能 前 后 
都 使 用 JavaScript 甚至 是 React? 


JavaScript 


Client Side 


Common <<< API 


Server Side 


JavaScript 


事实 上 ，React 的 优势 就 在 于 它 可 以 很 优雅 地 实现 Server Side Rendering 达到 
Isomorphic JavaScript 的 效果 。 在 react-dom/server 中 有 两 个 方法 

renderToString 和 renderToStaticMarkup 可 以 在 server 端 泻 染 你 的 
components。 其 主要 都 是 将 React Component 在 Server 端 转 成 DOM String， 也 
可 以 将 props 往 下 传 ， 然 而 事件 处 理会 失效 ， 要 到 client-side 的 React 接收 到 后 才 
会 把 它 加 上 去 (但 要 注意 server-side 和 client-side 的 checksum 要 一 致 不 然 会 出 
现 错误 ) ， 这 样 一 来 可 以 提高 泻 染 速度 和 SEO 效果 。 renderToString 和 

renderToStaticMarkup 最 大 的 差异 在 于 renderToStaticMarkup 会 少 加 一 些 
React 内 部 使 用 的 DOM 属性 ， 例 如 : data-react-id ， 因 此 可 以 节省 一 些 资 
源 。 


使 用 renderToString 进行 Server 端 泻 染 : 
import ReactDOMServer from 'react-dom/server'; 


ReactDOMServer.renderToString(<HelloButton name="Mark" />); 


泻 染 出 来 的 效果 : 


<button data-reactid=".7" data-react-checksum="762752829"> 
Hello, Mark 
</button> 


总 的 来 说 使 用 Isomorphic JavaScript 会 有 以 下 的 好 处 : 


. 有 助 于 SEO 

. Rendering 速度 较 快 ， 性 能 较 佳 

. BEA Template 语法 拥抱 Component 组 件 化 思考 ， 便 于 维护 
尽量 前 后 端 共用 代码 节省 开发 时 间 


A ON = 


不 过 要 注意 的 是 如 果 有 使 用 Redux 在 Server Side Rendering 中 ， 其 流程 相对 复 
杂 ， 不 过 大 致 流程 如 下 : 由 后 端 预先 加 载 需要 的 initialState， 由 于 Server 7E 2e» 
须 全 部 都 转 成 string， 所 以 先 将 state 先 dehydration (脱水 ) ， 等 到 client 端 再 
rehydration (K) ， 重 建 store 往 下 传 到 前 端的 React Component ° 


而 要 把 数据 从 服务 器 端 传递 到 客户 端 ， 我 们 需要 : 
1. 把 取得 初始 state 当做 参数 并 对 每 个 请 求 创 建 一 个 全 新 的 Redux store 实体 
2. 选择 性 地 dispatch 一 些 action 


3. 把 state 从 store 取出 来 
4. 把 state 一 起 传 到 客户 端 


接 下 来 我 们 就 开始 动手 实 作 一 个 简单 的 React Server Side Rendering Counter 应 用 
程序 。 


项 目 成 果 堆 屏 


Clicked: 46 times a] -| 


环境 安装 与 设置 


1. 安装 Node 和 NPM 


2. 安装 所 需 套件 


$ npm install --save react react-dom redux react-redux react 
-router immutable redux-immutable redux-actions redux- thunk 
babel-polyfill babel-register body-parser express morgan qs 


$ npm install --save-dev babel-core babel-eslint babel-loade 
r babel-preset-es2015 babel-preset-react babel-preset-stage- 
1 eslint eslint-config-airbnb eslint-loader eslint-plugin-im 
port eslint-plugin-jsx-ad1y eslint-plugin-react html-webpack 
-plugin webpack webpack-dev-server redux-logger 


接 下 来 我 们 先 设 置 一 下 开发 文档 。 


1. 设置 Babel 的 设置 档 : .babelrc 
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{ 

"presets": [ 
"es2015", 
"react", 

], 

“plugins v] 

} 


2. 设置 ESLint 的 设置 档 和 规则 : .eslintrc 


{ 
"extends": "airbnb", 
"rules": { 
"react/jsx-filename-extension": [1, { "extensions": [".js" 
, ".jsx"] 3. 
ty 
"env" :{ 
"browser": true, 
} 
} 


EIE 


3. 设置 Webpack 设置 档 : webpack.config.js 


// 让 你 可 以 动态 插入 bundle 好 的 .js 档 到 .index.html 
const HtmlwebpackPlugin = require('html-webpack-plugin'); 


const HTMLWebpackPluginConfig = new HtmlWebpackPlugin( { 
template: ${ dirnamej/src/index.html', 

filename: 'index.html', 

inject: 'body', 


3); 
// entry JX3t A &» output 为 进行 完 eslint^ babel loader 转译 后 的 
文件 位 置 
module.exports = { 
entry: [ 


S S(C/ index. Js 
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], 

output: { 
path: ~${__dirname}/dist’, 
filename: 'index bundle.js', 


tr 
module: { 
preLoaders: [ 
{ 
best: /X.]sxS| N. 1597, 
loader: 'eslint-loader', 
include: '$( dirnamelsrc , 
exclude: /bundle\.js$/ 
} 
], 
loaders: [{ 
tests ANS 
exclude: /node_modules/, 
loader: 'babel-loader', 
query: ( 
presets: ['es2015', 'react'], 
ty 
il 
tr 


// 启动 开发 测试 用 server 设置 (不 能 用 在 production) 
devServer: { 

inline: true, 

port: 8008, 


3 
plugins: [HTMLWebpackPluginConfig], 


iy; 


大 好 了 1 这 样 我 们 就 完成 了 开发 环境 的 设置 可 以 开始 动手 实 作 React Server 
Side Rendering Counter 应 用 程序 了 | 

先 看 一 下 我 们 整个 专案 的 数据 结构 ， 我 们 把 整个 专案 分 成 三 个 主要 的 文件 来 

( client 、 server ， 还 有 共用 代码 的 common ) 
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Y E react-redux-server-rendering 
> © client 
> C3 common 
> C3 node modules 
> C3 server 
[3 .babelrc 
[3 .eslintrc 
package.json 
README.md 
webpack.config.js 


动手 实 作 


首先 ， 我 们 先 定义 了 client 的 index.js 
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// 引用 babel-polyfill 避免 浏览 器 不 支持 部 分 ESO 用 法 
import 'babel-polyfill'; 

import React from 'react'; 

import ReactDOM from 'react-dom'; 

import { Provider } from 'react-redux'; 


import CounterContainer from '../common/containers/CounterContai 
ner'; 
import configureStore from '../common/store/configureStore' 


import { fromJS ) from 'immutable'; 


// M. server 取得 传 进来 的 initialState e h TUF $E £47 rehy 
dration (xX) 
const initialState = window.  PRELOADED STATE ; 


// 由 于 我 们 使 用 ImmutableJS， 所 以 需要 把 在 server-side dehydration (At 
水 ) 又 在 前 端 rehydration (K) 的 initialState 转 成 ImmutableJS 数据 
型 态 ， 并 传 进 configureStore 创建 store 

const store = configureStore(fromJS(initialState)); 


// 接 下 来 就 跟 一 般 的 React App 一 样 ， 把 store Æt Provider 往 下 传 到 Co 
mponent 中 
ReactDOM. render ( 
<Provider store={store}> 
<CounterContainer /> 
</Provider>, 
document.getElementById('app') 


); 


由 于 Node 端 要 到 新 版 对 于 ESO 支持 较 好 ， 所 以 先 用 babel-register 在 
src/server/index.js 去 即时 转译 server.js ， 但 目前 不 建议 在 
production 环境 使 用 。 


// use babel-register to precompile ES6 syntax 
require('babel-register'); 
require('./server'); 
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接着 是 我 们 server 端 ' 也 是 这 个 范例 最 重要 的 一 个 部 分 。 首 先 我 们 用 
express 创建 了 一 个 port 为 3000 的 server， 并 使 用 webpack 去 运行 client 
的 代码 。 这 个 范例 中 我 们 使 用 了 handleRender 当 request # AN (直接 拜访 页 
面 或 刷新 ) 就 会 运行 fetchCounter() 进行 处 理 : 


import Express from 'express'; 
import qs from 'qs'; 


import webpack from 'webpack'; 

import webpackDevMiddleware from 'webpack-dev-middleware'; 
import webpackHotMiddleware from 'webpack-hot-middleware'; 
import webpackConfig from '../webpack.config'; 


import React from 'react'; 

import { renderToString } from 'react-dom/server'; 
import ( Provider ) from 'react-redux'; 

import { fromJS } from 'immutable'; 


import configureStore from '../common/store/configureStore'; 
import CounterContainer from '../common/containers/CounterContai 
ner'; 

import { fetchCounter ) from '../common/api/counter'; 


const app = new Express(); 
const port - 3000; 


function handleRender(req, res) 1 
// 模仿 实际 异步 api 处 理 情形 
fetchCounter(apiResult => { 
// HR api 提供 的 数据 (这 边 我 们 api 是 用 setTimeout 进行 模仿 异步 状况 
) ， 若 网 址 参数 有 值 择 取 值 ， 若 无 则 使 用 api 提供 的 随机 值 ， 若 都 没有 则 取 0 
const params = qs.parse(req.query); 
const counter = parseInt(params.counter, 10) || apiResult | | 


// 将 initialState 转 成 immutable 和 符合 state 设计 的 格式 
const initialState = fromJS({ 
counterReducers: { 
count: counter, 


} 
}); 
// 创建 一 个 redux store 
const store - configureStore(initialState); 
// 使 用 renderToString 将 
const html = renderToString( 
<Provider store={store}> 


component #A string 


<CounterContainer /> 
</Provider> 
); 
// 从 创建 的 redux store 中 取得 initialState 
const finalState = store.getState(); 
// 将 HTML 和 initialState 传 到 client-side 
res.send(renderFullPage(html, finalState)); 


;) 


// HTML Markup， 同 时 也 把 preloadedState 转 成 字 串 (stringify) 传 到 cl 
ient-side > 又 称 为 dehydration (脱水 ) 
function renderFullPage(html, preloadedState) { 
return ` 
<!doctype html> 
«html» 
«head» 
<title>Redux Universal Example</title> 
</head> 
<body> 
«div id="app">${html}</div> 
<Script= 


</script> 
«script src="/static/bundle.js"></script> 
</body> 
</html> 


// 使 用 middleware T webpack 去 进行 hot module reloading 
const compiler = webpack(webpackConfig); 


app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPat 
h: webpackConfig.output.publicPath })); 
app.use(webpackHotMiddleware(compiler)); 

// 每 次 server 42] request 都 会 调用 handleRender 
app.use(handleRender); 


// 监听 server 状况 
app.listen(port, (error) => { 
if (error) { 
console.error(error) 
) else { 
console.info('--» Listening on port ${port}. Open up http: 
//localhost:${port}/ in your browser.) 
} 
}); 


[ER 


处 理 完 Server 的 部 份 接 下 来 我 们 来 处 理 actions 的 部 份 ， 在 这 个 范例 中 actions 相 
对 简单 ， 主 要 就 是 添加 和 减少 两 个 行为 ， 以 下 为 


src/actions/counterActions.js 


import ( createAction } from 'redux-actions'; 
import { 

INCREMENT_COUNT, 

DECREMENT_COUNT, 
} from '../constants/actionTypes'; 


export const incrementCount = createAction(INCREMENT COUNT); 
export const decrementCount = createAction(DECREMENT COUNT); 


以 下 为 输出 常数 src/constants/actionTypes.js 


export const INCREMENT_COUNT = 'INCREMENT_COUNT'; 
export const DECREMENT_COUNT = 'DECREMENT_COUNT'; 


在 这 个 范例 中 我 们 使 用 setTimeout() 来 仿真 异步 的 产生 数据 让 server 端 在 每 次 
接收 request 时 读 取 随机 产生 的 值 。 实 务 上 ， 我 们 会 开 API 让 Server 读 取 初始 要 
导入 的 initialState ° 


function getRandomInt(min, max) { 
return Math.floor(Math.random() * (max - min)) + min 


export function fetchCounter(callback) { 
setTimeout(() => { 
callback(getRandomInt(i, 100)) 
}, 500) 


谈 完 actions 我 们 来 看 我 们 的 reducers， 在 这 个 范例 中 reducers 也 是 相对 简单 的 ， 
主要 就 是 针对 添加 和 减少 两 个 行为 去 set 值 ， 以 下 是 


src/reducers/counterReducers.js 


import { fromJS } from 'immutable'; 
import { handleActions } from 'redux-actions'; 
import { CounterState } from '../constants/models'; 


import { 
INCREMENT_COUNT, 
DECREMENT_COUNT, 

} from '../constants/actionTypes'; 


const counterReducers = handleActions({ 
INCREMENT_COUNT: (state) => ( 
state.set( 
FGOUDIES 
state.get('count') + 1 
) 


); 
DECREMENT COUNT: (state) => ( 


state.set( 
“COU” 
state.get('count') - 1 
) 


), 
}, CounterState); 


export default counterReducers; 


准备 好 了 rootReducer 就 可 以 使 用 _ createStore 来 创建 我 们 store > 48 4 iE 
意 的 是 由 于 configureStore 需要 被 client-side 和 server-side 使 用 ， 所 以 把 它 
输出 成 function 方便 传 入 initialState 使 用 。 以 下 是 


src/store/configureStore.js 


import { createStore, applyMiddleware } from 'redux'; 
import thunk from 'redux-thunk'; 

import createLogger from 'redux-logger'; 

import rootReducer from '../reducers'; 


export default function configureStore(preloadedState) ( 
const store - createStore( 
rootReducer, 
preloadedState, 
applyMiddleware(createLogger({ stateTransformer: state => st 
ate.toJS() }), thunk) 
) 


return store 


最 后 来 到 了 components 和 containers 的 时 间 ， 这 次 我 们 的 Component = 
要 有 两 个 按钮 让 用 户 可 以 添加 和 减少 数字 并 显示 目前 数字 。 以 下 是 


src/components/Counter/Counter.js 


import React, ( Component, PropTypes } from 'react' 


const Counter = ({ 
count, 
onIncrement, 
onDecrement, 

Jy => ( 
<p> 


Clicked: {count} times 


DS; 
«button onClick={onIncrement }> 
+ 
</button> 
D 
«button onClick={onDecrement }> 
</button> 
1. 
</p> 
); 
// 注意 要 检查 propTypes 和 给 定 默 认 值 


Counter.propTypes = { 
count: PropTypes.number.isRequired, 
onIncrement: PropTypes.func.isRequired, 
onDecrement: PropTypes.func.isRequired 


Counter.defaultProps - ( 
count: 0, 
onIncrement: () => {}, 
onDecrement: () => {} 


export default Counter; 


最 后 把 取出 的 count 和 事件 处 理 方 法 用 connect 传 到 Counter 就 大 功 告 成 


了 |! 以 下 是 src/containers/CounterContainer/CounterContainer.js 


import 'babel-polyfill'; 
import ( connect ) from 'react-redux'; 
import Counter from '../../components/Counter ' ; 


import { 
incrementCount, 
decrementCount, 

Iotrom w/e ACTOS: | 


export default connect ( 
(state) => ({ 
count: state.get('counterReducers').get('count'), 
3) 
(dispatch) => (( 
onIncrement: () => ( 
dispatch(incrementCount()) 
), 
onDecrement: () => ( 
dispatch(decrementCount() ) 
), 


3) 
)(Counter); 


若 一 切 顺利 ， 在 终端 机 打上 $ npm start ， 你 将 可 以 在 浏览 器 的 
http://localhost:3000 看 到 自己 的 成 果 | 
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Clicked: 46 times = -| 


S. 


ex 


^N 


A ak T Web 页 面 浏览 的 进程 和 Isomorphic JavaScript 的 优势 ， 并 介绍 了 如 何 
使 用 React Redux 进行 Server Side Rendering 的 应 用 编程 。 下 一 个 章节 我 们 将 集 
成 后 端 数据 库 ， 运 用 React + Redux + Node (Isomorphic) 开发 一 个 简单 的 食谱 分 
享 网 站 。 


延伸 阅读 


. DavidWells/isomorphic-react-example 

. RickWong/react-isomorphic-starterkit 

. Server-rendered React components in Rails 

. Our First Node.js App: Backbone on the Client and Server 
. Going Isomorphic with React 

. Aservice for server-side rendering your JavaScript views 

. Isomorphic JavaScript: The Future of Web Apps 

. React Router Server Rendering 


ON OO BP C0 Pn9-— 


(image via airbnb ) 


‘door: 任意 门 


N 
A 
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| 回首 页 | 上 一 章 : 用 React + Router + Redux + ImmutableJS 写 一 个 Github 查找 
应 用 | 下 一 章 : 用 React + Redux + Node (Isomorphic JavaScript) 开发 食谱 分 享 
网 站 | 





| 纠 错 、 提 问 或 许愿 | 
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用 React + Redux + Node (Isomorphic 
JavaScript) 开发 食谱 分 享 网 站 


如 果 你 是 从 一 开始 跟着 我 们 踏 出 React 旅程 的 读者 丨 的 茶 喜 你， 也 谢谢 你 一 路 跟着 
我 们 的 学 习 脚 步 ， 对 一 个 初学 者 来 说 这 一 段 路 并 不 容易 。 本 章 是 扣除 附录 外 我 们 最 
后 一 个 正式 章节 的 范例 ， 也 是 规模 最 大 的 一 个 ， 在 这 个 章节 中 我 们 要 整合 过 去 所 学 
和 添加 一 些 知识 开发 一 个 可 以 登录 会 员 并 分 享 食谱 的 社 群 网 站 ，Let's GO! 


需求 规划 


让 使 用 者 可 以 登录 会 员 并 分 享 食谱 的 社 群 网 站 


功能 规划 


1. React Router / Redux / Immutable / Server Render / Async API 
2. 使 用 者 登录 / 登 出 (JSON Web Token) 

3. CRUD 表单 资料 处 理 

4. 资料 库 串 接 (ORM/MongoDB) 


使 用 技术 


. React 

. Redux(redux-actions/redux-promise/redux-immutable) 
. React Router 

. ImmutableJS 

Node MongoDB ORM(Mongoose) 

. JSON Web Token 

. React Bootstrap 

. Axios(Promise) 

. Webpack 


OANA OAR WD 一 
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10. UUID 


项 目 成 果 堆 图 


OPENCOOK 





RAZOR 
SMS BLINK Sok RA IP REA xm 


oo 


OPENCOOK 


请 输入 您 的 Email 
Enter Email 


请 输入 您 的 密码 


Enter Password 


登入 





烤 布丁 


先 加 鲜 奶 ， 加 蛋 ， 放 和 烤箱 


回回 


登入 
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OPENCOOK 分 享 食谱 BH 





te s, 
MADR 先 加 鲜 奶 ， 加 蛋 ， 放 入 烤箱 
家 常 菜 ， 不 要 加 太 多 水 ， 加 入 少许 蒜 蓝 提 味 EXES 四 

me | | 


oo mee 
oo 


OPENCOOK 分 享 食谱 BH 


请 输入 食谱 名 称 
Enter text 


请 输入 食谱 说 明 


textarea 


请 输入 食谱 图片 网 址 


Enter text 


提交 送出 


环境 安装 与 设 定 
1. 安装 Node 和 NPM 


2. 安装 所 需 套 件 
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$ npm install --save react react-dom redux react-redux react-rou 
ter immutable redux-immutable redux-actions redux-promise bcrypt 

body-parser cookie-parser debug express immutable jsonwebtoken 
mongoose morgan passport passport-local react-router-bootstrap a 
xios serve-favicon validator uuid 


$ npm install --save-dev babel-core babel-eslint babel-loader ba 
bel-preset-es2015 babel-preset-react babel-preset-stage-1 eslint 

eslint-config-airbnb eslint-loader eslint-plugin-import eslint- 
plugin-jsx-aiily eslint-plugin-react html-webpack-plugin webpack 
webpack-dev-server redux-logger 


接 下 来 我 们 先 设 定 一 下 开发 文档 。 


1. i& € Babel 的 设 定 档 : ,babelrc 


{ 


"presets": [ 
"es2015", 
"react", 


]; 
"plugins": [] 
} 


2. RE ESLint 的 设 定 档 和 规则 : .eslintrc 


{ 


"extends": "airbnb", 
"pubes 


"react/jsx-filename-extension": [1, { "extensions": [".js" 


, ".jsx"] 3], 

3 

envies 
"browser": true, 





— Krl 





3. i& X Webpack 设 定 档 : webpack.config.js 
import webpack from 'webpack'; 


module.exports = { 
entry: [ 
',/src/client/index.js', 
], 
output: { 
path: ~“${__dirname}/dist’, 
filename: 'bundle.js', 
publicPath: '/static/' 
ty 
module: { 
preLoaders: [ 
{ 
LES /A SX SS 
loader: 'eslint-loader', 
include: `${_dirname}/app`, 
exclude: /bundle\.js$/, 
3 


] 
// 使 用 Hot Module Replacement 外 挂 


plugins: [ 
new webpack.optimize.OccurrenceOrderPlugin(), 
new webpack.HotModuleReplacementPlugin() 
], 
loaders: [( 
test: /\.js$/, 
exclude: /node_modules/, 
loader: 'babel-loader', 


query: { 
presets: ['es2015', 'react'], 
ty 
il 
tr 
}; 


4. 设 定 src/server/config/index.js 


export default ({ 
"secret™: "ilovecooking", 
"database": "mongodb://localhost/open_cook" 


3); 


KRAFT | 这 样 我 们 就 完成 了 开发 环境 的 设 定 可 以 开始 动手 实 作 我 们 的 食谱 分 享 社 群 
应 用 程序 了 |! 


同时 我 们 也 初步 设计 我 们 文件 夹 结 构 ， 主 要 我 们 将 文件 夹 分 为 
client ^ common ^ server 


* E» src 
* E» client 
index.js 
Y & common 
> C3 actions 
> C3 components 
> © constants 
> © containers 
> C3 reducers 
> C3 routes 
> C3 store 
> C3 utils 
v E» server 
> © config 
> C3 controllers 
> © models 
> C3 public 
index.js 
server.js 
[3 .babeirc 
[3 .eslintrc 
package.json 
README.md 
webpack.config.js 


动手 实 操 


首先 我 们 先进 行 src/client/index.js 的 设计 : 
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import React from 'react'; 

import ReactDOM from 'react-dom'; 

import { Provider } from 'react-redux'; 

import { browserHistory, Router } from 'react-router'; 
import { fromJS } from 'immutable'; 

// 我 们 的 routing 放置 在 common 文件 夹 中 的 routes 


import routes from '../common/routes'; 
import configureStore from '../common/store/configureStore'; 
import ( checkAuth } from '../common/actions'; 


// 将 server side 传 过 来 的 initialState # rehydration (Æx) 
const initialState = window.__PRELOADED_STATE__; 


// 将 initialState 传 给 configureStore 函数 创建 出 store #142 Provi 
der 
const store = configureStore(fromJS(initialState) ); 
ReactDOM. render ( 
<Provider store={store}> 
<Router history={browserHistory} routes={routes} /> 
</Provider>, 
document.getElementById('app') 


): 


JE Node 端 要 到 新 版 对 于 ESO 支持 较 好 ， 所 以 先 用 babel-register 在 
src/server/index.js 去 即时 转译 server.js ， 但 不 建议 在 production 
环境 使 用 。 


// use babel-register to precompile ES6 
require('babel-register'); 
require('./server'); 


// 引入 Express » mongoose (MongoDB ORM) 以 及 相关 server 上 使 用 的 套件 
/* Server Packages */ 

import Express from 'express'; 

import bodyParser from 'body-parser'; 

import cookieParser from 'cookie-parser'; 

import morgan from 'morgan'; 


= 
Co 
NO 
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import mongoose from 'mongoose'; 
import config from './config'; 

// 引入 后 端 model i$ii model 和 数据 库 互 动 
import User from './models/user'; 
import Recipe from './models/recipe'; 


// 引入 webpackDevMiddleware 当做 前 端 server middleware 

/* Client Packages */ 

import webpack from 'webpack'; 

import React from 'react'; 

import webpackDevMiddleware from 'webpack-dev-middleware'; 
import webpackHotMiddleware from 'webpack-hot-middleware'; 
import ( RouterContext, match } from 'react-router'; 

import { renderToString } from 'react-dom/server'; 

import ( Provider } from 'react-redux'; 

import Immutable, { fromJS } from 'immutable'; 

/* Common Packages */ 

import webpackConfig from '../../webpack.config'; 

import routes from '../common/routes'; 

import configureStore from '../common/store/configureStore'; 
import fetchComponentData from '../common/utils/fetchComponentDa 
ray 

import apiRoutes from './controllers/api.js'; 

7? comido 

// 初始 化 Express server 

const app - new Express(); 

const port - process.env.PORT || 3000; 

// 连接 到 数据 库 ， 相 关 设 定 档案 放 在 config.database 
mongoose.connect(config.database); // connect to database 
app.set('env', 'production'); 

// 设 定 静态 档案 位 置 

app.use('/static', Express.static(__dirname + '/public')); 
app.use(cookieParser()); 

// use body parser so we can get info from POST and/or URL param 
ellas 

app.use(bodyParser.urlencoded(( extended: false })); // only can 
deal with key/value 

app.use(bodyParser.json( )); 

// use morgan to log requests to the console 
app.use(morgan( 'dev' )); 
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// 负责 每 次 接受 到 request 的 处 理 函 数 ， 判 断 该 如 何 处 理 和 取得 initialState 
整理 后 结合 服务 器 泻 染 页 面 传 往 前 端 
const handleRender = (req, res) => { 
// Query our mock API asynchronously 
match({ routes, location: req.url }, (error, redirectLocation, 
renderProps) => { 
if (error) { 
res.status(500).send(error.message) ; 
} else if (redirectLocation) { 
res.redirect(302, redirectLocation.pathname + redirectLoca 
tion.search); 
} else if (renderProps == null) 1 
res.status(404).send('Not found'); 
J 
fetchComponentData(req.cookies.token).then((response) => { 
let isAuthorized = false; 


if (response[1].data.success === true) { 
isAuthorized = true; 
) else { 
isAuthorized = false; 
} 
const initialState = fromJS({ 
recipe: { 
recipes: response[0].data, 
recipe: { 
aoje ks 
name: '', 
description: '', 
imagePath: '', 
} 
ty 
user: { 


isAuthorized: isAuthorized, 
isEdit: false, 
} 
3); 
// server side /€ Ze Jd 
// Create a new Redux store instance 
const store - configureStore(initialState); 


const initView = renderToString( 
<Provider store={store}> 
<RouterContext {...renderProps} /> 
</Provider> 
); 
let state = store.getState(); 
let page - renderFullPage(initView, state); 
return res.status(200).send(page); 
}) 


.catch(err => res.end(err.message)); 


;) 


// 基础 页 面 HTML 设计 
const renderFullPage = (html, preloadedState) => (^ 
<!doctype html> 
«html» 
«head» 
<title>OpenCook 分 享 料理 的 美好 时 光 </title> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/b 
ootstrap/latest/css/bootstrap.min.css"> 
<!-- Optional theme --> 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/b 
ootstrap/latest/css/bootstrap-theme.min.css"> 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/b 
ootswatch/3.3.7/journal/bootstrap.min.css"> 
<body> 
«div id="app">${html}</div> 
<script> 
window.  PRELOADED STATE . = ${JSON.stringify(preloade 
dState).replace(/</g, '\\x3c')} 
</script> 
«script src="/static/bundle.js"></script> 
</body> 
«/html»^ 


): 


// 设 定 hot reload middleware 
const compiler = webpack(webpackConfig); 


app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPat 
h: webpackConfig.output.publicPath })); 
app .use(webpackHotMiddleware(compiler ) ); 


// 设计 API prefix， 并 使 用 controller 中 的 apiRoutes 进行 处 理 
app.use('/api', apiRoutes); 
// 使 用 服务 器 端 handleRender 
app.use(handleRender ) ; 
app.listen(port, (error) => { 
if (error) ( 
console.error(error) 
) else { 
console.info('--» Listening on port ${port}. Open up http: 
//localhost:${port}/ in your browser.) 


由 于 Node 端 要 到 新 版 对 于 ES6 支持 较 好 ， 所 以 先 用 babel-register 在 
src/server/index.js 去 即时 转译 server.js ， 但 目前 不 建议 在 
production 环境 使 用 。 


// use babel-register to precompile ES6 syntax 
require('babel-register'); 
require('./server'); 


现在 我 们 来 设计 一 下 我 们 数据 库 的 Schema > # 3% ih & i148 MongoDB 的 ORM 
Mongoose， 可 以 方便 我 们 使 用 物件 方式 进行 资料 库 的 操作 : 


用 React + Redux + Node (Isomorphic JavaScript) 开发 一 个 食谱 分 享 网 站 


// 引入 mongoose 和 Schema 
import mongoose, { Schema } from 'mongoose'; 


// 使 用 mongoose.model 建立 新 的 资料 表 ， 并 将 Schema 传 入 

这 边 我 们 设计 了 食谱 分 享 的 一 些 基本 要 素 ， 包 括 名 称 、 描 述 、 照 片 位 置 等 
export default cde CURRIN Recipe', new Schema({ 

ad: String, 

name: String, 

description: String, 

imagePath: String, 

steps: Array, 

updatedAt: Date, 
3); 


// 引入 mongoose 和 Schema 
import mongoose, { Schema } from 'mongoose'; 


// 使 用 mongoose.model 建立 新 的 数据 表 ， 并 将 Schema 传 入 
/ 这 边 我 们 设计 了 使 用 者 的 一 些 基 本 要 素 ， 包 括 名 称 、 描 述 、 照 片 位 置 
export default mongoose.model('User', new Schema({ 

id: Number, 

username: String, 

email: String, 

password: String, 

admin: Boolean 


})); 


为 了 方便 维护 ， 我 们 把 API 的 部 份 统一 在 src/server/controllers/api.js i# 
行 管理 ， 这 部 份 会 涉及 比较 多 Node 和 mongoose 的 操作 ， 若 读者 尚 不 熟悉 可 以 参 
考 mongoose 官网 


import Express from 'express'; 

// 引入 jsonwebtoken £ft 

import jwt from 'jsonwebtoken'; 

// 引入 User ^ Recipe Model 方便 进行 资料 库 操作 
import User from '../models/user'; 

import Recipe from '../models/recipe'; 


N 


用 React + Redux + Node (Isomorphic JavaScript) 开发 一 个 食谱 分 享 网 站 


import config from '../config'; 


// API Route 
const app = new Express(); 
const apiRoutes = Express.Router(); 
// i&X€ JSON Web Token 的 secret variable 
app.set('superSecret', config.secret); // secret variable 
// 使 用 者 登录 API ， 依 据 使 用 email 和 密码 去 验证 ， 若 成 功 则 回 传 一 个 认证 to 
ken (时 效 24 小 时 ) 我 们 把 它 存在 cookie 中 ， 方 便 前 后 端 存 取 。 这 边 我 们 先 不 考虑 
太 多 信息 安全 的 问题 
apiRoutes.post('/login', function(req, res) { 
// find the user 
User. findOne( { 
email: req.body.email 
}, (err, user) => { 
if (err) throw err; 
if (!user) { 
res.json({ success: false, message: 'Authentication failed 
. User not found.' }); 
} else if (user) { 
// check if password matches 
if (user.password != req.body.password) { 
res.json({ success: false, message: 'Authentication fail 
ed. Wrong password.' }); 
) else { 
// if user is found and password is right 
// create a token 
const token = jwt.sign(( email: user.email }, app.get('s 
uperSecret'), ( 
expiresIn: 60 * 60 * 24 // expires in 24 hours 
3); 
// return the information including token as JSON 
// 若 登 录 成 功 回 传 一 个 json 讯息 
res.json({ 
success: true, 
message: 'Enjoy your token!', 
token: token, 
userId: user._id 


3); 
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} 
3); 
3); 
// 初始 化 api， 一 开始 数据 库 尚 未 建立 任何 使 用 者 ， 我 们 需要 在 浏览 器 输入 "http: 
//localhost:3000/api/setup' `， 进 行 数 据 库 初始 化 。 这 个 动作 将 新 增 一 个 使 用 者 
、 一 份 食谱 ， 若 是 成 功 新 增 将 回 传 一 个 success 讯息 
apiRoutes.get('/setup', (req, res) => { 
// create a sample user 
const sampleUser = new User({ 
username: 'mark', 
email: 'markQdemo.com', 
password: '123456', 
admin: true 
3); 
const sampleRecipe = new Recipe({ 
id: '110ec58a-a0f2-4ac4-8393-c866d813b8d1', 
name: '&x»€', 
description: ' 番 茄 炒 蛋 ， 一 道 非常 经 典 的 家 常 菜 料 理 。 虽 然 看 似 普 通 ， 但 每 
个 家 庭 都 有 属于 自己 家 里 的 不 同 味道 '， 
imagePath: 'https://ci.staticflickr.com/6/5011/5510599760 66 
68df5a8a z.jpg', 
steps: ['XAd&35', 'dp4', UACEGREEES, HORST, 
updatedAt: new Date() 
3); 
// save the sample user 
sampleUser.save((err) => { 
if (err) throw err; 
sampleRecipe.save((err) => { 
if (err) throw err; 
console.log('User saved successfully'); 
res.json(( success: true }); 
3) 
3); 


3); 
// 回 传 所 有 recipes 


apiRoutes.get('/recipes', (req, res) => { 
Recipe. find({}, (err, recipes) => { 
res.status(200).json(recipes); 
3) 
3): 
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// route middleware to verify a token 
// 接 下 来 的 api 将 进行 控 管 ， 也 就 是 说 必须 在 网 址 请 求 中 夹带 认证 token 才能 完 


apiRoutes.use((req, res, next) => { 
// check header or url parameters or post parameters for token 
// 确认 标 头 、 网 址 或 post 参数 是 否 含有 token， 本 范例 因为 简便 使 用 网 址 que 
ry 参数 
var token = req.body.token || req.query.token || req.headers[ ' 
x-access-token']; 
// decode token 
if (token) { 
// verifies secret and checks exp 
jwt.verify(token, app.get('superSecret'), (err, decoded) => 


if (err) { 
return res.json({ success: false, message: 'Failed to au 
thenticate token.' }); 
} else { 
// if everything is good, save to request for use in oth 
er routes 
req.decoded = decoded; 


next(); 
} 
Ir 
} else { 


// if there is no token 
// return an error 
return res.status(403) .send({ 
success: false, 
message: 'No token provided. ' 
3): 
} 
}); 
// 确认 认证 是 否 成 功 
apiRoutes.get('/authenticate', (req, res) => { 
res.json({ 
success: true, 
message: 'Enjoy your token!', 


+); 
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3); 
// create recipe 新 增 食谱 
apiRoutes.post('/recipes', (req, res) => { 
const newRecipe = new Recipe({ 
name: req.body.name, 
description: req.body.description, 
imagePath: req.body.imagePath, 
steps: ['HAGA', 人 和 'RAVHASG', HR 
updatedAt: new Date() 
3); 
newRecipe.save((err) -» ( 
if (err) throw err; 
console.log('User saved successfully'); 
res.json(( success: true 3); 
3); 
3); 
// update recipe 根据 id (mongodb 的 id) 更 新 食谱 
apiRoutes.put('/recipes/:id', (req, res) => { 
Recipe.update({ _id: req.params.id }, { 
name: req.body.name, 
description: req.body.description, 
imagePath: req.body.imagePath, 
steps: AAS ‘417° X, “RAVAES, CONSER] 
updatedAt: new Date() 
) ,(err) => ( 
if (err) throw err; 
console.log('User updated successfully'); 
res.json(( success: true 3); 
3); 
3); 
// remove recipe 根据 _id 删除 食谱 ， 若 成 功 回 传 成 功 讯 息 
apiRoutes.delete('/recipes/:id', (req, res) => { 
Recipe.remove({ _id: req.params.id }, (err, recipe) => { 
if (err) throw err; 
console.log('remove saved successfully'); 
res.json(( success: true 3); 
3); 
3); 


export default apiRoutes; 


设 定 整个 App 的 routing? £11 3: 3e Xt OA 

HomePageContainer ^ LoginPageContainer ^ SharePageContainer ， 值 
得 注意 的 是 我 们 这 边 使 用 Higher Order Components (Higher Order Components 
为 一 个 函数 ， 接 收 一 个 Component 后 在 Class Component 的 render 中 return El 
传 入 的 components) 方式 去 确认 使 用 者 是 否 有 登录 ， 若 有 没 登 录 则 不 能 进入 分 享 
食谱 页 面 ， 反 之 若 已 登录 也 不 会 再 进 到 登录 页 面 : 


import React from 'react'; 

import { Route, IndexRoute } from 'react-router'; 

import Main from '../components/Main'; 

import CheckAuth from '../components/CheckAuth' ; 

import HomePageContainer from '../containers/HomePageContainer'; 
import LoginPageContainer from '../containers/LoginPageContainer ' 
/ 

import SharePageContainer from '../containers/SharePageContainer ' 


, 


export default ( 
«Route path='/' component={Main}> 
<IndexRoute component={HomePageContainer} /> 
<Route path="/login" component={CheckAuth(LoginPageContainer 
, ‘'guest')}/> 
<Route path="/share" component={CheckAuth(SharePageContainer 
, 'auth')}/> 
</Route> 
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为 常数 ( src/constants/actionTypes.js ) 


export const AUTH_START 
export const AUTH_COMPLETE 
export const AUTH_ERROR 


"AUTH START"; 
"AUTH COMPLETE"; 
"AUTH ERROR"; 


export const START LOGOUT - "START LOGOUT"; 
export const CHECK AUTH = "CHECK AUTH"; 
export const SET USER = "SET_USER"; 

export const SHOW_SPINNER = "SHOW_SPINNER"; 
export const HIDE_SPINNER = "HIDE_SPINNER"; 
export const SET_UI = "SET UL"; 


export const GET_RECIPES = 'GET_RECIPES'; 
export const SET_RECIPE = 'SET_RECIPE'; 
export const ADD RECIPE = 'ADD RECIPE'; 
export const UPDATE RECIPE - 'UPDATE RECIPE'; 
export const DELETE RECIPE - 'DELETE RECIPE'; 


"e 


jit src/actions/recipeActions.js ， 我 们 这 边 使 用 redux-promise > "T AK 
BY 


使 用 非 同步 的 行为 WebAPI : 


import { createAction } from 'redux-actions'; 
import WebAPI from '../utils/WebAPI'; 


import { 
GET_RECIPES, 
ADD_RECIPE, 
UPDATE_RECIPE, 
DELETE_RECIPE, 
SET_RECIPE, 
} from '../constants/actionTypes'; 


export const getRecipes = createAction('GET RECIPES', WebAPI.get 
Recipes); 

export const addRecipe = createAction('ADD RECIPE', WebAPI.addRe 
cipe); 

export const updateRecipe - createAction('UPDATE RECIPE', WebAPI 
.updateRecipe); 

export const deleteRecipe - createAction('DELETE RECIPE', WebAPI 
.deleteRecipe); 

export const setRecipe = createAction('SET_RECIPE'); 


设 定 src/actions/uiActions.js 


import { createAction } from 'redux-actions'; 
import WebAPI from '../utils/WebAPI'; 


import { 
SHOW_SPINNER, 
HIDE_SPINNER, 
SET_UI, 
} from '../constants/actionTypes'; 


export const showSpinner = createAction('SHOW_SPINNER'); 
export const hideSpinner = createAction('HIDE_SPINNER'); 
export const setUi = createAction('SET UI'); 


t src/actions/userActions.js ， 处 理 使 用 者 登录 登 出 等 行为 : 


import { createAction } from 'redux-actions'; 
import WebAPI from '../utils/WebAPI'; 


import { 
AUTH_START, 
AUTH_COMPLETE, 
AUTH_ERROR, 
START_LOGOUT, 
CHECK_AUTH, 
SET_USER 
} from '../constants/actionTypes'; 


export const authStart = createAction( 'AUTH START', WebAPI.login 
); 

export const authComplete = createAction('AUTH COMPLETE'); 
export const authError = createAction( 'AUTH_ERROR'); 

export const startLogout = createAction('START LOGOUT', WebAPI.1 
ogout); 

export const checkAuth = createAction( 'CHECK AUTH'); 

export const setUser = createAction( 'SET_USER'); 
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T scr/actions/index.js 输出 actions: 


export * from './userActions'; 
export * from './recipeActions'; 
export * from './uiActions'; 


T scr/common/utils/fetchComponentData.js W% Æ server side 初始 
fetchComponentData : 


// 这 边 使 用 axios 方便 进行 promises base request 
import axios from 'axios'; 
// 记得 附加 上 我 们 存在 cookies 的 token 
export default function fetchComponentData(token = 'token') { 
const promises = [axios.get('http://localhost:3000/api/recipes' 
), axios.get('http://localhost:3000/api/authenticate?token=' + t 
oken)]; 
return Promise.all(promises); 


a ———————————pnnÓ: 


T scr/common/utils/WebAPI.js 所 有 前 端 API 的 处 理 : 


import axios from 'axios'; 

import { browserHistory } from 'react-router'; 
// 引入 uuid 当做 食谱 id 

import uuid from 'uuid'; 


import { 
authComplete, 
authError, 
hideSpinner, 
completeLogout, 

J Tron a s7aceLons i 


// getCookie Bar key Ht value 
function getCookie(keyName) ( 
var name = keyName + '-'; 
const cookies - document.cookie.split(';'); 


for(let i = 0; i < cookies.length; i++) ( 
let cookie = cookies[i]; 
while (cookie.charAt(0)--' ') { 
cookie = cookie.substring(!); 


} 
if (cookie.indexOf(name) == 0) { 
return cookie.substring(name.length, cookie.length); 
} 
} 
return oas 


export default { 
// 呼叫 后 端 登 录 api 
login: (dispatch, email, password) => { 
axios.post('/api/login', { 
email: email, 
password: password 
3) 
.then((response) => { 
if(response.data.success === false) { 
dispatch(authError()); 
dispatch(hideSpinner()); 
alert( ' 发 生 错 误 ， 请 再 试 一 次 上 | ' )， 
window. location.reload(); 
} else { 
if (!document.cookie.token) { 
let d - new Date(); 
d.setTime(d.getTime() + (24 * 60 * 60 * 1000)); 
const expires = 'expires-' + d.toUTCString(); 
document.cookie = 'token=' + response.data.token + '; ' 
+ expires; 
dispatch(authComplete()); 
dispatch(hideSpinner()); 
browserHistory.push('/'); 


j 

3) 

.catch(function (error) 1 
dispatch(authError()); 


3); 
ty 
// 呼叫 后 端 登 出 api 
logout: (dispatch) => { 
document.cookie = 'token=; ' + 'expires=Thu, 01 Jan 1970 00: 
00:01 GMT; '; 
dispatch(hideSpinner()); 
browserHistory.push('/'); 
i 
// 确认 使 用 者 是 否 登 录 
checkAuth: (dispatch, token) => { 
axios.post('/api/authenticate', { 
token: token, 
3) 
.then((response) => { 
if(response.data.success === false) { 
dispatch(authError()); 
} else { 
dispatch(authComplete()); 
J 
3) 


.catch(function (error) { 
dispatch(authError()); 
3); 
tr 
// 取得 目前 所 有 食谱 
getRecipes: () => { 
axios.get('/api/recipes' ) 
.then((response) => { 
3) 
.catch((error) => { 
3); 
tr 
// 呼叫 新 增 食谱 api， 记 得 附加 上 我 们 存在 cookies 的 token 
addRecipe: (dispatch, name, description, imagePath) => { 
const id = uuid.v4(); 
axios.post('/api/recipes?token=' + getCookie('token'), { 
id: id, 
name: name, 
description: description, 


imagePath: imagePath, 
3) 
.then((response) => { 
if(response.data.success === false) { 
dispatch(hideSpinner()); 
alert(' 发 生 错 误 ， 请 再 试 一 次 1" )， 
browserHistory.push('/share'); 
) else ( 
dispatch(hideSpinner()); 
window.location.reload(); 
browserHistory.push('/'); 


} 
}) 
.catch(function (error) { 
}); 
tr 
// 呼叫 更 新 食谱 api， 记 得 附加 上 我 们 存在 cookies 的 token 


updateRecipe: (dispatch, recipeld, name, description, imagePat 
h) => { 
axios.put('/api/recipes/' + recipeld + '?token=' + getCookie( 
'token'), 1 
id: recipeld, 
name: name, 
description: description, 
imagePath: imagePath, 


}) 
. then( (response) => { 
if(response.data.success === false) { 
dispatch(hideSpinner()); 
dispatch(setRecipe({ key: 'recipeId', value: '' })); 


dispatch(setUi({ key: 'isEdit', value: false })); 
alert( ' 发 生 错 误 ， 请 再 试 一 次 上 1 ' )， 
browserHistory.push('/share'); 

) else ( 
dispatch(hideSpinner()); 
window.location.reload(); 
browserHistory.push('/'); 

} 

}) 


.catch(function (error) { 


3); 
ty 
// 呼叫 删除 食谱 api， 记 得 附加 上 我 们 存在 cookies 的 token 
deleteRecipe: (dispatch, recipeId) => { 
axios.delete('/api/recipes/' + recipeId + '?token=' + getCoo 
kie('token')) 
.then((response) => { 
if(response.data.success === false) { 
dispatch(hideSpinner()); 
alert( ' 发 生 错 误 ， 请 再 试 一 次 上 1 ')， 
browserHistory.push('/'); 
) else ( 
dispatch(hideSpinner()); 
window.location.reload(); 
browserHistory.push('/'); 
} 
}) 


.Ccatch(function (error) { 


3); 


E mmm] i 


接 下 来 设 定 我 们 的 reducers ， 以 下 是 
src/common/reducers/data/recipeReducers.js ^ GET RECIPES 负责 将 后 
3% API 取得 的 所 有 食谱 存放 在 recipes 中 : 


import { handleActions } from 'redux-actions'; 
import { RecipeState } from '../../constants/models'; 


import { 
GET_RECIPES, 
SET_RECIPE, 
} from '../../constants/actionTypes'; 


const recipeReducers = handleActions(( 
GET_RECIPES: (state, { payload }) => ( 
state.set( 
'recipes', 
payload.recipes 
) 


), 
SET RECIPE: (state, { payload }) => (人 


state.setIn(payload.keyPath, payload.value) 


), 
), RecipeState); 


export default recipeReducers; 


以 下 是 src/common/reducers/data/userReducers.js ， 负 责 确 认 登 录 相 关 处 
理事 项 。 注 意 的 是 由 于 登录 是 非 同步 执 行 ， 所 以 会 有 几 个 阶段 的 行为 要 做 处 理 : 


import { handleActions } from 'redux-actions'; 
import { UserState } from '../../constants/models'; 


import { 
AUTH_START, 
AUTH_COMPLETE, 
AUTH_ERROR, 
LOGOUT_START, 
SET_USER, 
} from '../../constants/actionTypes'; 


const userReducers = handleActions({ 
AUTH_START: (state) => ( 
state.merge({ 


isAuthorized: false, 


3) 

) 

AUTH COMPLETE: (state) => ( 
state.merge({ 


email: '', 
Y 


password: ; 
isAuthorized: true, 


;) 


), 
AUTH ERROR: (state) => ( 


state.merge({ 


username: 7 

email: '', 

password: '', 

isAuthorized: false, 
}) 


), 
START LOGOUT: (state) => ( 


state.merge({ 
isAuthorized: false, 
3) 
), 
CHECK_AUTH: (state) => ( 
state.set('isAuthorized', true) 
), 
SET_USER: (state, { payload }) => ( 
state.set(payload.key, payload.value) 


), 
}, UserState); 


export default userReducers; 


以 下 是 src/common/reducers/ui/uiReducers.js ， 负 责 确认 UI State 相关 处 
J : 


import { handleActions } from 'redux-actions'; 
import { UiState } from '../../constants/models'; 


import { 
SHOW_SPINNER, 
HIDE_SPINNER, 
SET_UI, 
) from '../../constants/actionTypes'; 


const uiReducers = handleActions(( 
SHOW SPINNER: (state) => ( 
state.set( 
'spinnerVisible', 


true 
) 
), 
HIDE_SPINNER: (state) => ( 
state.set( 
'spinnerVisible', 
false 
) 


), 
SET_UI: (state, { payload }) => ( 
state.set(payload.key, payload.value) 


), 
}, UiState); 


export default uiReducers; 


最 后 把 所 有 recipes Æ src/common/reducers/index.js 使 用 
combineReducers 整合 在 一 起 ， 注 意 的 是 我 们 整个 App 的 资料 流 要 维持 
immutable : 


import { combineReducers } from 'redux-immutable'; 
import ui from './ui/uiReducers'; 

import recipe from './data/recipeReducers'; 

import user from './data/userReducers'; 

// import routes from './routes'; 


const rootReducer = combineReducers({ 
ui, 
recipe, 
user, 


}); 


export default rootReducer; 


以 下 是 src/common/store/configureStore.js 处 理 store 的 建立 ， 这 次 我 们 
使 用 了 promiseMiddleware 的 middleware : 


import { createStore, applyMiddleware ) from 'redux'; 
import promiseMiddleware from 'redux-promise'; 

import createLogger from 'redux-logger'; 

import Immutable from 'immutable'; 

import rootReducer from '../reducers'; 


const initialState = Immutable.Map(); 


export default function configureStore(preloadedState = initialS 
tate) { 
const store = createStore( 
rootReducer, 
preloadedState, 
applyMiddleware(createLogger({ stateTransformer: state => st 
ate.toJS() }, promiseMiddleware) ) 


); 


return store; 


经 过 一 连 串 努力 ， 我 们 来 到 了 View 的 布 建 。 在 这 个 App 中 我 们 主要 会 由 一 个 
AppBar 负责 所 有 页 面 的 导 览 ， 也 就 是 每 个 页 面 都 会 有 AppBar 常 驻 在 上 面 ， 然 而 
上 面 的 内 容 则 会 依 UI State 中 的 isAuthorized 而 有 所 不 同 。 最 后 要 留意 的 是 我 们 使 
用 了 React Bootstrapt 来 建立 React Component ° 


import React from 'react'; 

import { LinkContainer } from 'react-router-bootstrap'; 

import { Link } from 'react-router'; 

import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'rea 
ct-bootstrap'; 


const AppBar = ({ 
isAuthorized, 
onToShare, 
onLogout, 
}) => ( 
<Navbar> 
<Navbar .Header> 
<Navbar .Brand> 
<Link to="/">0penCook</Link> 
</Navbar .Brand> 
<Navbar . Toggle /> 
</Navbar .Header> 
<Navbar .Collapse> 
{ 
isAuthorized === false ? 
( 
<Nav pullRight> 
<LinkContainer to={{ pathname: '/login' }}><NavItem 
eventKey={2} href="#">% #</NavItem></LinkContainer> 
</Nav> 


«Nav pullRight> 
«NavItem eventKey-[1) onClick-[onToShare]»2 € & ik«/N 
avitem> 
«NavItem eventKey={2} onClick={onLogout} href="#">% 
出 </NavItem> 
</Nav> 


} 


</Navbar .Collapse> 
</Navbar> 


); 


export default AppBar; 


以 下 是 src/common/containers/AppBarContainer/AppBarContainer.js 


import React from 'react'; 

import { connect } from 'react-redux'; 

import AppBar from '../../components/AppBar'; 
import ( browserHistory ) from 'react-router'; 


import { 
startLogout, 
setRecipe, 
setUi, 
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export default connect( 
(state) => ({ 
isAuthorized: state.getIn(['user', 'isAuthorized']), 
3) 
(dispatch) => (( 
onToShare: () => { 
dispatch(setRecipe({ key: 'recipeId', value: '' })); 
dispatch(setUi(( key: 'isEdit', value: false })); 
window. location.reload(); 
browserHistory.push('/share'); 
tr 
onLogout: () => ( 
dispatch(startLogout (dispatch) ) 
), 
3) 
) (AppBar); 


以 下 是 src/components/Main/Main.js ° #3 route 机 制 让 AppBarContainer 
可 以 成 为 整个 App 母 模版 : 


import React from 'react'; 
import AppBarContainer from '../../containers/AppBarContainer'; 


const Main = (props) => ( 
<div> 
<AppBarContainer /> 
<div> 
{props.children} 
</div> 
</div> 


); 
export default Main; 
在 checkAuth 这 个 Component 中 ， B 使 用 到 了 Higher Order Components 


的 观念 。Higher Order Components 为 一 个 函数 ， 接 收 一 个 Component 后 在 
Class Component 的 render i return 回 传 入 的 components 方式 去 确认 使 用 者 是 


和 否 有 登录 ， 若 有 没 登 录 则 不 能 进入 分 享 食谱 页 面 ， 反 之 若 已 登录 也 不 会 再 进 到 登录 
$5 d: 


import React from 'react'; 
import ( connect } from 'react-redux'; 
import ( withRouter ) from 'react-router'; 


// High Order Component 
export default function requireAuthentication(Component, type) ( 
class AuthenticatedComponent extends React.Component { 
componentWillMount() { 
this.checkAuth( ); 
} 
componentWillReceiveProps(nextProps) { 
this.checkAuth(); 
} 
checkAuth() { 
if(type === 'auth') { 


if (!this.props.isAuthorized) { 
this.props.router.push('/'); 
} 
} else { 
if (this.props.isAuthorized) { 
this.props.router.push('/'); 


j 
j 
} 
render() { 
return ( 
<div> 
{ 
(type === 'auth') ? 
this.props.isAuthorized === true ? <Component {...this 
props } /> : null 
this.props.isAuthorized === false ? <Component {...t 
his.props } /> : null 
j 
«/div» 
) 
j 
3 


const mapStateToProps = (state) => ({ 
isAuthorized: state.getIn(['user', 'isAuthorized']), 


+); 


return connect (mapStateToProps ) (withRouter(AuthenticatedCompon 
ent)); 
J 


我 们 将 每 个 食谱 呈现 设计 成 RecipeBox， 以 下 是 在 
src/common/components/HomePage/HomePage.js 使 用 map 方法 去 迭代 我 们 的 

Pur 

食谱 : 


import React from 'react'; 
import RecipeBoxContainer from '../../containers/RecipeBoxContai 


ner'; 


const HomePage = ({ 
recipes 
D = ( 
<div> 
{ 
recipes.map((recipe, index) => ( 
<RecipeBoxContainer recipe={recipe} key={index} /> 
)).toJS() 
} 
</div> 


); 


export default HomePage; 


以 下 是 
src/common/containers/HomePageContainer/HomePageContainer.js 


import React from 'react'; 
import ( connect } from 'react-redux'; 
import HomePage from '../../components/HomePage'; 


export default connect( 
(state) => (1 
recipes: state.getiIn(['recipe', 'recipes']), 
3) 
(dispatch) => ({ 


3) 
)(HomePage); 


在 src/common/components/LoginBox/LoginBox.js 设计 我 们 LoginBox : 


import React from 'react'; 
import { Form, FormGroup, Button, FormControl, ControlLabel } fr 
om 'react-bootstrap'; 


const LoginBox = ({ 
email, 
password, 
onChangeEmailInput, 
onChangePasswordInput, 
onLoginSubmit 

jos 
«div» 

«Form horizontal» 
«FormGroup 
controllId-"formBasicText" 


<ControlLabel> 请 输入 您 的 Email</ControlLabel> 
<FormControl 
type="text" 
onChange={onChangeEmailInput} 
placeholder="Enter Email" 
/> 
<FormControl.Feedback /> 
</FormGroup> 
<FormGroup 
controlId="formBasicText" 


<ControlLabel> 请 输入 您 的 密码 </ControlLabel> 
<FormControl 
type="password" 
onChange={onChangePasswordInput } 
placeholder="Enter Password" 
/> 
<FormControl.Feedback /> 
</FormGroup> 
<Button 
onClick={onLoginSubmit } 
bsStyle="success" 
bsSize="large" 
block 


提交 送出 
«/Button» 


</Form> 
</div> 


); 


export default LoginBox; 


以 下 是 


src/common/containers/LoginBoxContainer/LoginBoxContainer.js 


import React from 'react'; 
import { connect } from 'react-redux'; 
import LoginBox from '../../components/LoginBox'; 


import { 
authStart, 
showSpinner, 
setUser, 

erom /actions 


export default connect( 
(state) => ({ 
email: state.getIn(['user', 'email']), 
password: state.getIn(['user', 'password']), 
3) 
(dispatch) => (( 
onChangeEmailInput: (event) => ( 
dispatch(setUser({ key: 'email', value: event.target.value 
})) 
), 


onChangePasswordInput: (event) => ( 
dispatch(setUser({ key: 'password', value: event.target.va 
lue })) 
), 
onLoginSubmit: (email, password) => () => { 
dispatch(authStart(dispatch, email, password)); 
dispatch(showSpinner()); 
i 
3) 
(stateProps, dispatchProps, ownProps) => ( 
const { email, password } = stateProps; 
const { onLoginSubmit } = dispatchProps; 
return Object.assign({}, stateProps, dispatchProps, ownProps 


onLoginSubmit: onLoginSubmit(email, password), 


3); 


} 
)(LoginBox); 


在 src/common/components/LoginPage/LoginPage.js * 4 spinnerVisible 为 
true 会 显示 spinner : 


import React from 'react'; 

import { Grid, Row, Col, Image } from 'react-bootstrap'; 

import LoginBoxContainer from '../../containers/LoginBoxContaine 
(ar 


const LoginPage = ({ 
spinnerVisible, 
jo 
«div» 
«Row className="Show-grid"> 
«Col xs={6} xsOffset={3}> 
<LoginBoxContainer /> 


{ spinnerVisible === true ? 
<Image src="/static/images/loading.gif" /> 
null 

} 

</Col> 
</ROw> 
</div> 


): 


export default LoginPage; 


以 下 是 


src/common/containers/LoginPageContainer/LoginPageContainer.js 


import React from 'react'; 
import { connect } from 'react-redux'; 
import LoginPage from '../../components/LoginPage'; 


export default connect( 
(state) => (1 
spinnerVisible: state.getIn(['ui', 'spinnerVisible']), 
3) 
(dispatch) => ({ 
}) 
)(LoginPage); 


» 
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的 话 可 以 修改 和 删除 食谱 : 


src/common/components/RecipeBox ， 使 用 者 登录 


import React from 'react'; 
import { Grid, Row, Col, Image, Thumbnail, Button ) from 'react- 
bootstrap'; 


const RecipeBox = (props) => { 
return( 
<Col xs={6} md={4}> 
«Thumbnail src={props.recipe.get('imagePath')} alt="242x 
200 
<h3>{props.recipe.get('name' )}</h3> 
<p>{props.recipe.get('description' )}</p> 
{ 
props.isAuthorized === true ? ( 
<p> 
<Button bsStyle="primary" onClick={props.onDeleteR 
ecipe(props.recipe.get('_id'))}>#lM</Button>&nbsp; 
<Button bsStyle="default" onClick={props.onUpadate 
Recipe(props.recipe.get('_id' ) )}>##%&</Button> 
</p>) 
null 
} 
</Thumbnail> 
</Col> 


); 


export default RecipeBox; 


以 下 是 


src/common/containers/RecipeBoxContainer/RecipeBoxContainer.js 


import React from 'react'; 

import { connect ) from 'react-redux'; 

import RecipeBox from '../../components/RecipeBox'; 
import { browserHistory } from 'react-router'; 


import { 
deleteRecipe, 
setRecipe, 


setUi 
OTIO 27 oA HC ECPOTI S S 


export default connect( 
(state) => (1 
isAuthorized: state.getIn(['user', 'isAuthorized']), 
recipes: state.getIn(['recipe', 'recipes']), 
3) 
(dispatch) => (( 
onDeleteRecipe: (recipeld) => () => ( 
dispatch(deleteRecipe(dispatch, recipeId)) 
), 
onUpadateRecipe: (recipes) => (recipeId) => () => { 
const recipeIndex = recipes. findIndex((_recipe) => ( recip 
e.get(' id') === recipeId)); 
const recipe = recipeIndex !== -1 ? recipes.get(recipeInde 
X) : undefined; 
dispatch(setRecipe(( keyPath: ['recipe'], value: recipe )) 
); 
dispatch(setRecipe(( keyPath: ['recipe', 'id'], value: rec 
ipeld })); 
dispatch(setUi(( key: 'isEdit', value: true })); 
browserHistory.push('/share?recipeId-' + recipeId); 
ty 
3) 
(stateProps, dispatchProps, ownProps) => ( 
const ( recipes ) - stateProps; 
const ( onUpadateRecipe } = dispatchProps; 
return Object.assign({}, stateProps, dispatchProps, ownProps 


onUpadateRecipe: onUpadateRecipe(recipes), 
3): 
} 
) (RecipeBox) ; 


设计 我 们 分 享 食谱 页 面 ， 这 边 我 们 把 编辑 食谱 和 新 增 分 享 一 起 共用 了 同一 个 
components， 差 别 在 于 我 们 会 判断 Ul State 中 的 isEdit ， 决定 相应 处 理 方 
式 。 在 中 src/common/components/ShareBox/ShareBox.js ， 可 以 让 使 用 者 登 
录 的 后 修改 和 删除 食谱 : 


import React from 'react'; 
import { Form, FormGroup, Button, FormControl, ControlLabel } fr 
om 'react-bootstrap'; 


const ShareBox = (props) => { 
return (<div> 
<Form horizontal> 
<FormGroup 
controllId-"formBasicText" 


<ControlLabel> 请 输入 食谱 名 称 </ControlLabel> 
<FormControl 
type="text" 
placeholder="Enter text" 
defaultValue={props.name} 
onChange={props.onChangeNameInput } 
/> 
<FormControl.Feedback /> 
</FormGroup> 
<FormGroup 
controllId-"formBasicText" 


<ControlLabel>7a 4a A 274 1 A</ControlLabel> 
<FormControl 
componentClass="textarea" 
placeholder="textarea" 
defaultValue={props.description} 
onChange={props.onChangeDescriptionInput } 
/> 
<FormControl.Feedback /> 
</FormGroup> 
<FormGroup 
controlid="formBasicText" 


<ControlLabel> 请 输入 食谱 图 片 网 址 </ControlLabel> 
<FormControl 
type="text" 
placeholder="Enter text" 
defaultValue={props.imagePath} 
onChange={props.onChangeImageUr1} 


/> 
<FormControl.Feedback /> 
</FormGroup> 
<Button 
onClick={props.onRecipeSubmit } 
bsStyle="success" 
bsSize="large" 
block 


</Button> 
</Form> 
</div>); 


ia 


export default ShareBox; 


以 下 是 


src/common/containers/ShareBoxContainer/ShareBoxContainer.js 


import React from 'react'; 
import { connect } from 'react-redux'; 
import ShareBox from '../../components/ShareBox'; 


import { 
addRecipe, 
updateRecipe, 
showSpinner, 
setRecipe, 

rrom c c hack lons. | 


export default connect ( 
(state) => ({ 
recipes: state.getIn(['recipe', 'recipes']), 
recipeId: state.getIn(['recipe', 'recipe', 'id']), 
name: state.getIn(['recipe', 'recipe', 'name']), 
description: state.getin(['recipe', 'recipe', 'description'] 
), 


imagePath: state.getIn(['recipe', 'recipe', 'imagePath']), 


isEdit: State. detin( | uri'- 'isEdit']), 
3) 
(dispatch) => (( 
onChangeNameInput: (event) => ( 
dispatch(setRecipe({ keyPath: ['recipe', 'name'], value: e 
vent.target.value })) 
), 
onChangeDescriptionInput: (event) => ( 
dispatch(setRecipe({ keyPath: ['recipe', 'description'], v 
alue: event.target.value ))) 
), 
onChangeImageUrl: (event) => ( 
dispatch(setRecipe({ keyPath: ['recipe', 'imagePath'], val 
ue: event.target.value })) 
), 
onRecipeSubmit: (recipes, recipeld, name, description, image 
Path, isEdit) => () => ( 
if (isEdit === true) { 
dispatch(updateRecipe(dispatch, recipeId, name, descript 
ion, imagePath)); 
dispatch(showSpinner()); 
) else ( 
dispatch(addRecipe(dispatch, name, description, imagePat 
h)); 
dispatch(showSpinner()); 
} 
tr 
3) 
(stateProps, dispatchProps, ownProps) => ( 
const ( recipes, recipeld, name, description, imagePath, isE 
dit ) - stateProps; 
const ( onRecipeSubmit ) - dispatchProps; 
return Object.assign({}, stateProps, dispatchProps, ownProps 


onRecipeSubmit: onRecipeSubmit(recipes, recipeld, name, de 
scription, imagePath, isEdit), 
3): 


} 
) (ShareBox); 


单纯 的 SharePage ( src/common/components/SharePage/SharePage.js ) 页 
a8: 


import React from 'react'; 

import { Grid, Row, Col ) from 'react-bootstrap'; 

import ShareBoxContainer from '../../containers/ShareBoxContaine 
ya 


const SharePage = () => ( 
«div» 
«Row className="Show-grid"> 
«Col xs={6} xsOffset={3}> 
<ShareBoxContainer /> 
</Col> 
</ROwW> 
</div> 


); 


export default SharePage; 


以 下 是 


src/common/containers/SharePageContainer/SharePageContainer.js 


import React from 'react'; 
import ( connect } from 'react-redux'; 
import SharePage from '../../components/SharePage'; 


export default connect( 
(state) => (( 
3) 
(dispatch) => ({ 
}) 
)(SharePage); 


J& BOSE KGA £81 若 一 切 顺利 ， 在 终端 机 打上 $ npm start ， 你 将 可 以 在 浏 


eR 


览 器 的 http://localhost:3000 看 到 自己 的 成 果 ! 


用 React + Redux + Node (Isomorphic JavaScript) 开发 一 个 食谱 分 享 网 站 


OPENCOOK BA 





a 
m 烤 布 本 
先 加 鲜 奶 ， 加 蛋 ， 放 入 烤箱 
家 常 菜 ， 不 要 加 大多 水 ， 加 入 少许 藉 莹 提 味 ERRA C3 
me | at | 
oc 加 入 玉米 、 打 蛋 
Cic 
2 
d 2r 
NP 25 


本 章 整 合 过 去 所 学 和 添加 一 些 后 端 资料 库 知识 开发 了 一 个 可 以 登录 会 员 并 分 享 食谱 
的 社 群 网 站 |! 快 把 你 的 成 果 和 你 的 朋友 分 享 吧 ! 觉得 意犹未尽 ? 别 忘 了 附录 也 很 精 
A | 最 后 ， 再 次 谢谢 读者 们 支持 我 们 一 路 走 完了 React 开发 学 习 之 旅 ! 然而 前 端 技 
术 变 化 很 快 ， 唯 有 不 断 自我 学 习 才 能 持续 成 长 。 笔 者 才 玖 学 浅 ， 撰 写 学 习 心得 或 有 
鸣 漏 ， 若 有 任何 建议 或 提醒 都 欢迎 和 我 说 ， 大 家 一 起 加 油 : ) 
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Mt 3k— ^ React ES5 ^ ES6+ % LA At RR 








React 是 Facebook 推出 的 开源 JavaScript Library ° A A React 正式 开源 后 ， 
React EA AAMEMRR SKE 3$ 9857] React EAA (ecosystem) 的 过 
程 中 ， 可 以 上 我 们 顺便 学 习 现 代 化 Web 开发 的 重要 观念 (例如 : 
ES6、Webpack、Babel、 组 件 化 等 ) ， 成 为 更 好 的 开发 者 。 虽 然 

ES6 (ECMAScript2015) 、ES7 是 未 来 趋势 (本 文 将 ES6、ES7 称 为 ES6+) ， 
然而 目前 在 网 络 上 有 许多 的 学 习 资 源 仍 是 以 ES5 为 主 ， 导 致 读者 在 学 习 上 遇 到 一 
些 坑 和 迷惑 (本文 假设 读者 对 于 React 已 经 有 些 基 本 认识 ， 若 你 对 于 React 尚 不 熟 
悉 ， 建 议 先 行 阅读 官方 文件 和 本 篇 入 门 教学 ) 。 因 此 本 文 希望 透 过 整理 在 React 中 
ES5、ES6+ 常见 用 法 对 照 表 ， 让 读者 们 可 以 在 实现 功能 时 《尤其 在 React 

Native) 可 以 更 清楚 两 者 的 差异 ， 无 痛 转 移 到 ES6+。 
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. Modules 

. Classes 

. Method definition 

. Property initializers 

State 

. Arrow functions 

. Dynamic property names & template strings 
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8. Destructuring & spread attributes 
9. Mixins 
10. Default Parameters 


1. Modules 


随 着 Web 技术 的 进展 ， 组 件 化 开发 已 经 成 为 一 个 重要 课题 。 关 于 JavaScript 组 件 
化 我 们 这 边 不 详 述 ， 建 议 读 者 参考 PPT 和 这 篇 文章 。 


ES5 若 使 用 CommonJS 标准 ， 一 般 使 用 require() 用 法 引入 模块 : 


var React = require('react'); 
var MyComponent = require('./MyComponent'); 


输出 则 是 使 用 module.exports 


module.exports = MyComponent; 


ES6+ import 用 法 : 


import React from 'react'; 
import MyComponent from './MyComponent'; 


输出 则 是 使 用 export default 


export default class MyComponent extends React.Component { 


2. Classes 


在 React 中 组 件 (Component) 是 组 成 视觉 页 面 的 基础 。 在 ESS 中 我 们 使 用 
React.createClass() 来 建立 Component， 而 在 ES6+ 则 是 用 Classes 继承 
React.Component 来 建立 Component ° # 4A 54 Java 等 面向 对 象 语言 
(OOP) 的 读者 应 该 对 于 这 种 写法 比较 不 陌生 ， 不 过 要 注意 的 是 JavaScript 仍 是 


原型 继承 类 型 的 面向 对 象 程 序 语言 ， 只 是 使 用 Classes 让 面向 对 象 使 用 上 更 加 直 
观 。 对 于 选择 class 使 用 上 还 有 疑惑 的 读者 建议 可 以 阅读 React.createClass 
versus extends React.Component 这 篇 文章 。 


ES5 React.createClass() 用 法 : 


var Photo = React.createClass({ 
render: function() { 
return ( 
<div> 
<images alt={this.props.description} src={this.props.src 
} /> 
</div> 
); 
j 


3); 
ReactDOM.render(«Photo /», document.getElementById('main')); 


ES6+ class 用 法 : 


class Photo extends React.Component { 
render() { 
return <images alt={this.props.description} src={this.props. 
src} />; 
} 


} 
ReactDOM.render(«Photo /», document.getElementById('main')); 


在 ES5 我 们 会 在 componentwillMount 生命 周期 定义 希望 在 render 前 执 
行 ， 且 只 会 执行 一 次 的 任务 : 


var Photo = React.createClass({ 
componentWillMount: function() {} 


3); 


在 ES6+ 则 是 定义 在 constructor 建构 子 中 : 


class Photo extends React.Component { 
constructor(props) { 
super(props); 
/ / 
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3. Method definition 


在 ES6 中 我 们 使 用 Method 可 以 忽略 function 和 ，， 使 用 上 更 为 简洁 ! 
ES5 React.createClass() 用 法 : 


var Photo = React.createClass({ 
handleClick: function(e) {}, 
render: function() {} 


}); 


ES6+ class 用 法 : 


class Photo extends React ,. Component { 
handleClick(e) {} 
render() {} 


4. Property initializers 


Component 属性 值 是 数据 传递 重要 的 元 素 ， 在 ES5 中 我 们 使 用 proprypes 和 
getDefaultProps 来 定义 属性 〈props) 的 预 设 值 和 型 别 : 


var Todo = React.createClass({ 
getDefaultProps: function() { 
return { 
checked: false, 
maxLength: 10, 
J; 
ty 
propTypes: { 
checked: React.PropTypes.bool.isRequired, 
maxLength: React.PropTypes.number.isRequired 
tr 
render: function() { 
return(); 
J 
3): 


在 ES6+ 中 我 们 则 是 参考 ES7 property initializers 使 用 class 中 的 静态 属性 
(static properties) 来 定义 : 


class Todo extends React.Component { 
static defaultProps = { 
checked: false, 
maxLength: 10, 
p // 注意 有 分 号 
static propTypes = { 
checked: React.PropTypes.bool.isRequired, 
maxLength: React.PropTypes.number .isRequired 
J; 
render() { 
return(); 


ES6+ 男 外 一 种 写法 ， 可 以 留意 一 下 ， 主 要 是 看 各 团队 意 好 和 规范 ， 选 择 合适 的 方 


式 : 


class Todo extends React.Component { 


render() { 
return ( 
<View /> 
); 
} 


} 
Todo.defaultProps = { 


checked: false, 
maxLength: 10, 
J; 
Todo.propTypes = { 
checked: React.PropTypes.bool.isRequired, 
maxLength: React.PropTypes.number.isRequired, 


H 


5. State 


在 React T Props 和 state 是 数据 流传 递 的 重要 元 素 ， 不 同 的 是 state 可 
更 改 ， 可 以 去 执行 一 些 运算 。 在 ES5 中 我 们 使 用 getInitialState 去 初始 化 
state 


var Todo = React.createClass({ 
getInitialState: function() { 
return { 
maxLength: this.props.maxLength, 
J; 
ty 
3): 


在 ES6+ 中 我 们 初始 化 state 有 两 种 写法 : 


class Todo extends React.Component { 
state = { 
maxLength: this.props.maxLength, 


另外 一 种 写法 ， 使 用 在 构造 函数 初始 化 。 比 较 推荐 使 用 这 种 方式 ， 方 便 做 一 些 运 
E. 
class Todo extends React.Component ( 
constructor (props){ 
super (props); 
this.state = { 
maxLength: this.props.maxLength, 


ti 


6. Arrow functions 


在 讲 Arrow functions 之 前 ， 我 们 先 聊 聊 在 React 中 this 和 它 所 代表 的 
context 。 在 ES5 中 ， 我 们 使 用 React.createClass() 来 建立 
Component > RÆ React.createClass() 下 ， 预 设 帮 你 绑 定 好 method 的 
this ， 你 疆 须 自行 绑 定 。 所 以 你 可 以 看 到 像 是 下 面 的 例子 ， callback 
function handleButtonClick 中 的 this 是 指 到 component 的 实例 
(instance) ， 而 非 触 发 事件 的 对 象 : 


var TodoBtn = React.createClass({ 
handleButtonClick: function(e) { 


// 此 this 442] component 的 实例 (instance) ， 而 非 button 


this.setState((showOptionsModal: true); 


ty 
render: function(){ 
return ( 
<div> 


<Button onClick={this.handleButtonClick}>{this.p 


rops. label}</Button> 


</div> 


}, 
3); 


然而 自动 绑 定 这 种 方式 反而 会 让 人 容易 误解 ， 所 以 在 ES6+ 推荐 使 用 bind 
this 或 使 用 Arrow functions (CAME ŽA scope 的 this 
context ) 两 种 方式 ， 你 可 以 参考 下 面 例 子 : 


class TodoBtn extends React.Component 
1 
handleButtonClick(e) { 
// 确认 绑 定 this 442] component instance 
this.setState({toggle: true}); 


} 
render(){ 


// 这 边 可 以 用 this.handleButtonClick.bind(this) 手动 绑 定 或 是 


Arrow functions () => {} 用 法 
return ( 
<div> 


<Button onClick={this.handleButtonClick.bind(thi 
S)? onClick={(e)=> {this.handleButtonClick(e)} }>{this.props.lab 


el}</Button> 
</div> 


ty 


Arrow functions 虽然 一 开始 看 起 来 有 点 怪异 ， 但 其 实 观 念 很 简单 : 一 个 简化 的 
函数 。 了 有 函数 基本 上 就 是 参数 〈 不 一 定 要 有 参数 ) 、 表 达 式 、 回 传 值 (也 可 能 是 回 传 
undefined ) 


// Arrow functions 的 一 些 例 子 


()=>7 
e=>e+2 
()=>{ 
alert('XD'); 
J 
(a,b)=>atb 
e=>{ 
if (e == 2){ 
return 2; 
} 
return 100/e; 
} 


不 过 要 注意 的 是 无 论 是 bind 或 是 Arrow functions ， 每 次 执行 回 传 都 是 指 到 
一 个 新 的 函数 ， 若 需要 再 调用 到 这 个 函数 ， 请 记得 先 把 它 存 起 来 : 


错误 用 法 : 


class TodoBtn extends React.Component{ 
componentWillMount()1 


Btn.addEventListener('click', this.handleButtonClick.bin 
d(this)); 
j 
componentDidmount ()1( 


Btn.removeEventListener('click', this.handleButtonClick. 
bind(this)); 


J 
onAppPaused(event)1 


j 


正确 用 法 : 


class TodoBtn extends React.Component{ 
constructor(props) { 
super (props); 
this.handleButtonClick = this.handleButtonClick.bind(this 
); 
J 
componentWillMount()1 
Btn.addEventListener('click', this.handleButtonClick); 
} 
componentDidMount ( ) { 
Btn.removeEventListener('click', this.handleButtonClick ) 


_ ——— ee 2) 


更 多 Arrows and Lexical This 特性 可 以 参考 这 个 文件 。 


7. Dynamic property names & template strings 
以 前 在 ES5 我 们 要 动态 设 定 属性 名 称 时 ， 往 往 需要 多 写 几 行 代码 才能 达到 目标 : 


var Todo = React.createClass({ 
onChange: function(inputName, e) { 
var stateToSet = {}; 
stateToSet[inputName + 'Value'] = e.target.value; 
this.setState(stateToSet ); 
3 
3); 


但 在 ES6+? > 3£ it enhancements to object literals 和 template strings 可 以 轻松 
完成 动态 设 定 属性 名 称 的 任务 : 


class Todo extends React.Component { 
onChange(inputName, e) { 
this.setState({ 
[ ${inputName}Value’]: e.target.value, 
3); 
} 
} 


Template Strings 是 一 种 语法 糖 (syntactic sugar) ， 方 便 我 们 组 织 字 串 (这 边 也 用 
上 let ^ const 变数 和 常数 定义 的 方式 ， 和 var 的 function scope 不 同 
的 是 它们 是 属于 block scope ， 亦 即 作 用 域 存在 于 {} 间 ) 


// Interpolate variable bindings 

const name = "Bob", let = "today"; 

"Hello ${name}, how are you ${time}?~> \\ Hello Bob, how are you 
today? 


8. Destructuring & spread attributes 


在 React 的 Component 中 ， 父 组 件 利 用 props 来 传递 数据 到 子 组 件 是 常见 作 
法 ， 然 而 我 们 有 时 会 希望 只 传递 部 分 数据 ， 此 时 ES6+ 中 的 Destructuring 和 JSX 
的 Spread Attributes > ... Spread Attributes 主要 是 用 来 迭代 对 彰 : 


class Todo extends React.Component ( 


render() ( 
var { 
className, 
...Others, // ...others 包含 this.props 除了 className 外 所 


有 值 。this.props = (value: 'true', title: 'header', className: 'c 
ontent') 
} = this.props; 
return ( 
<div className={className}> 
sTOodoU3st 1. others} 7» 
«button onClick={this.handleLoadMoreClick}>Load more</bu 
tton> 
</div> 


); 


但 使 用 上 要 注意 的 是 若是 有 重复 的 属性 值 则 以 后 来 必 盖 ， 下 面 的 例子 中 车 
...this.props ， 有 className ， 则 被 后 来 的 main RS: 


<div {...this.props} className="main"> 


</div> 


而 Destructuring 也 可 以 用 在 简化 Module 的 引入 上 ， 这 边 我 们 先 用 ESS 中 
引入 方式 来 看 : 


var React = require('react-native'); 
var Component = React.component; 


class HellowWorld extends Component { 
render() { 
return ( 
«View» 
<Text>Hello, world!</Text> 
</View> 


); 


export default Helloworld; 


以 下 ES5 写法 : 


var React = require('react-native'); 
var View = React.View; 


在 ES6+ 则 可 以 直接 使 用 Destructuring 这 种 简化 方式 来 引入 模块 中 的 组 件 : 


// 这 边 等 于 上 面 的 写法 
var { View } = require('react-native'); 


更 进一步 可 以 使 用 import 语法 : 


import React, { 
View, 
Component, 
Text, 
} from 'react-native'; 


class HelloWworld extends Component { 
render() { 
return ( 
«View» 
<Text>Hello, world!</Text> 
</View> 


); 


export default Helloworld; 


9. Mixins 


在 ESS 中 ， 我 们 可 以 使 用 Mixins 的 方式 去 让 不 同 的 Component 共用 相似 的 功 
能 ， 重 用 我 们 的 代码 : 


var PureRenderMixin = require('react-addons-pure-render-mixin' ); 
React.createClass({ 
mixins: [PureRenderMixin], 


render: function() { 
return <div className={this.props.className}>foo</div>; 


} 
3); 


但 由 于 官方 不 打算 在 ES6+ 中 继续 推行 Mixins ， 若 还 是 希望 使 用 ， 可 以 参考 看 
看 第 三 方 套件 或 是 这 个 文件 的 用 法 。 


10. Default Parameters 


以 前 ES5 我 们 函数 要 使 用 预 设 值 需要 这 样 使 用 : 


var link = function (height, color) { 
var height = height || 50; 
var color = color || 'red'; 


现在 ES6+ 的 函数 可 以 支援 预 设 和 值 ， 让 代码 更 为 简洁 : 


var link = function(height = 50, color = 'red') { 
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以 上 就 是 React ES5、ES6+ 常 见 用 法 对 照 表 ， 能 看 到 这 边 的 你 应 该 已 经 对 于 
React ES5、ES6 使 用 上 有 些 认 识 ， 先 给 自己 一 些 掌声 吧 ! 确实 从 ES6 开始 ， 
JavaScript 和 以 前 我 们 看 到 的 JavaScript 有 些 不 同 ， 增 加 了 许多 新 的 特性 ， 有 些 读 
者 甚至 会 很 怀疑 说 这 上 趴 的 是 JavaScript "B ? ES6 的 用 法 对 于 初学 者 来 说 可 能 会 需要 
写 一 点 时 间 吸 收 ， 下 一 章 我 们 将 进 到 同样 也 是 有 革新 性 设计 和 有 趣 的 React 
Native， 用 JavaScript 和 React 写 Native App ! 


延伸 阅读 


. React/React Native 的 ES5 ES6 写 法 对 照 表 
. React on ES6+ 

. react native 中 es6 语 法 解析 

. Learn ES2015 

ECMAScript 6 AT] 

React 官方 网 站 

. React INTRO TO REACT.JS 

. React.createClass versus extends React.Component 
. react-native-coding-style 

. Airbnb React/JSX Style Guide 
ECMAScript 6AT] 
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H3 — ` React ES5 ` ES6+ 常见 用 法 对 照 表 
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附录 二 、 用 React Native + Firebase 开发 跨 
平台 行动 应 用 程序 


REACT NATIVE 





3$-- ( wirte once, Run Everywhere ) 一 直 以 来 是 软体 工程 的 万 金 油 。 过 去 
一 段 时 间 市 场 上 有 许多 尝试 跨 平 台 开 发 原生 手机 应 用 (Native Mobile App) 的 解决 
方案 ， 尝 试 运用 HTML > CSS * JavaScript E 前 端 技术 达到 跨 平 台 的 效果 ， 
例如 : 运用 jQuery Mobile ` lonic 和 Framework7 等 Mobile UI dad 架 

(Framework) 结合 JavaScript 框架 并 搭配 Cordova/Pho 进行 跨 平台 手机 
应 用 开发 。 然 而 ， 因 为 这 些 解决 方案 通常 都 是 运 和 T" WebView xg ， 导 致 性 能 和 
体验 要 盟 正 趋 近 于 原生 应 用 程序 (Native App) 还 有 一 段 路 要 走 。 





[nn ， 随 著 Facebook 工程 团队 开发 的 React Native 横 空 出 世 ， 想 尝试 跨 平 台 解 决 
案 的 开发 者 又 有 了 新 的 选择 。 


React Native 特色 


在 正式 开始 开发 React Native App 之 前 我 们 先 来 介绍 一 下 React Native 的 主要 特 
色 : 


1. 使 用 JavaScript (ES6+) 和 React 打造 跨 平 台 原 生 应 用 程序 (Learn once, 
write anywhere ) 
2. 使 用 Native Components， 更 贴近 原生 使 用 者 体验 
3. 在 JavaScript 和 Native 之 问 的 操作 为 非 同步 (Asynchronous) 执行 ， 并 可 用 
Chrome 开发 者 工具 除 错 ， 支 持 Hot Reloading 
4. 使 用 Flexbox 进行 排版 和 布局 
5. 良好 的 可 扩展 性 (Extensibility) ， 容 易 整 合 Web 生态 系 标准 
(XMLHttpRequest ` navigator.geolocation F) 或 是 原生 的 组 件 或 函数 库 
(Objective-C、Java 或 Swift) 
6. Facebook 已 使 用 React Native 于 自家 Production App 且 将 持续 维护 ， 另 外 也 
Ay Ap EE dp RIAL RR GLE 
7. ik Web 开发 者 可 以 使 用 熟悉 的 技术 切入 Native App 开发 
8. 2015/3 发 布 iOS 版 本 ，2015/9 X 7& Android 版 本 
9. 目前 更 新 速度 快 ， 平 均 每 两 周 发 布 新 的 版 本 。 社 群 也 还 持续 在 寻找 最 佳 实践 ， 
关于 版 本 进展 可 以 参考 这 个 文件 
10. 支持 的 操作 系统 为 >= Android 4.1 (API 16) 和 >= iOS 7.0 


React Native 41435 


在 了 解 了 React Native 特色 后 ， 我 们 准备 开始 开发 我 们 的 React Native 应 用 程 

序 ! 由 于 我 们 的 范例 可 以 让 程序 跨 平台 共用 ， 所 以 你 可 以 使 用 iOS 和 Android 平台 
运行 。 不 过 若是 想 在 iOS 平台 开发 需要 先 准 备 MacOS 和 安装 Xcode 开发 工具 ， 
若是 你 准备 使 用 Android 平台 的 话 建议 先行 安装 Android Studio 和 Genymotion 模 
拟 器 。 在 我 们 范例 我 们 使 用 笔者 使 用 的 MacO OS 操作 系统 并 使 用 Android 平台 为 
主要 范例 ， 若 有 其 他 操作 系统 需求 的 读者 可 以 参考 官方 安装 说 明 。 


一 开始 请 先 安 装 Node、Watchman 和 React Native command line 工具 : 


// 若 你 使 用 Mac OS 你 可 以 使 用 官 方式 或 是 使 用 homebrew 安装 
$ brew install node 

// watchman 可 以 监 看 文件 是 否 有 修改 

$ brew install watchman 


oz ae 


// 安装 React Native command line 工具 
$ npm install -g react-native-cli 


由 于 我 们 是 要 开发 Android 平台 ， 所 以 必须 安装 : 


以 上 可 以 通过 Install Android Studio 官网 和 官方 安装 说 明 步骤 完成 。 


现在 ， 我 们 先 通 过 一 个 简单 的 HelloworldApp ， 让 大 家 感受 一 下 React Native 
项 目 如 何 开 发 。 


首先 ， 我 们 先 初始 化 一 个 React Native Project : 


$ react-native init HelloworldApp 


初始 的 文件 夹 结 构 


Y E HelloWorldApp 
> C3 android 
> O ios 
> C3 node modules 
[3 .buckconfig 
[3 .flowconfig 
[3 .gitignore 
[3 .watchmanconfig 
index.android.js 
index.ios.js 
package.json 


接 下 来 请 先 安装 注册 Genymotion > Genymotion 是 一 个 通过 电脑 模拟 Android 系统 
的 好 用 开发 模拟 器 环境 。 安 装 完 后 可 以 打开 并 选择 需要 使 用 的 屏幕 大 小 和 API 版 本 
的 Android 系统 。 部 署 好 开发 环境 后 就 可 以 启动 我 们 的 服务 : 


@ © @ °° Genymotion for personal use - Google Nexus 6 - 6.0.0 - AP... | 
VW 4 G 10:59 








若 你 是 使 用 Mac OS 操作 系统 的 话 可 以 执行 run-ios ， 若 是 使 用 Android 平台 则 
使 用 run-android 局 动 你 的 App。 在 这 边 我 们 先 使 用 Android 平台 进行 开发 

( 若 你 希望 实 机 测试 ， 请 将 电脑 接 上 你 的 Android 手机 ， 记 得 确保 menu 中 的 ip 地 
址 要 和 电脑 网 络 相同 。 若 是 遇 到 连 不 到 程序 server 且 手 机 为 Android 5.0+ 系统 ， 
可 以 执行 adb reverse tcp:8081 tcp:8081 ， 详 细 情 形 可 以 ) 


$ react-native run-android 


如 果 一 切 顺 利 的 话 就 可 以 在 模拟 器 中 看 到 初始 画面 : 


@ © @ -o Genymotion for personal use - Google Nexus 6 - 6.0.0 - AP... - 
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Welcome to React Native! 


To get started, edit index.android js 


Double tap R on your keyboard to reload, 
Shake or press menu button for dev menu 


q O [] 





接著 打开 index.android.js 就 可 以 看 到 以 下 代码 : 


import React, { Component } from 'react'; 
import { 

AppRegistry, 

StyleSheet, 


L 


IH 3k — M React Native + Firebase 开发 跨 平 台 行动 应 用 程序 (Native Mobile 
App? 
Text, 
View 
} from 'react-native'; 


// 组 件 式 的 开发 方式 和 React v Hi > @BRERMLE React Native 中 我 们 
不 使 用 HTML 元 素 而 是 使 用 React Native 组 件 进行 开发 ， 这 也 符合 Learn once 
, write anywhere 的 原则 。 
class HelloWorldApp extends Component { 
render() { 
return ( 
«View style={styles.container}> 
<Text style={styles.welcome}> 
Welcome to React Native! 
</Text> 
«Text style={styles.instructions}> 
To get started, edit index.android.js 
</Text> 
<Text style={styles.instructions}> 
Double tap R on your keyboard to reload, {'\n'} 
Shake or press menu button for dev menu 
</Text> 
</View> 


); 


// 在 React Native 中 styles 是 使 用 JavaScript 形式 来 撰写 ， 与 一 般 CSS 
比较 不 同 的 是 他 使 用 驼峰 式 的 属性 命名 : 
const styles = StyleSheet.create({ 
container: { 
flex: 1, 
justifyContent: 'center', 
alignitems: 'center', 
backgroundColor: '#F5FCFF', 
ty 
welcome: { 
fontSize: 20, 
textAlign: 'center', 
margin: 10, 


ty 


instructions: { 
textAlign: 'center', 
color: '#333333", 
marginBottom: 5, 


1m 
3); 


// 告诉 React Native App 你 的 进入 点 : 
AppRegistry.registerComponent('HelloworldApp', () => HelloWorldA 
pp); 


由 于 React Native 有 支持 Hot Reloading ， 若 我 们 更 改 了 程序 内 容 ， 我 们 可 以 
使 用 打开 模拟 器 Menu 重新 剧 新 页 面 ， 此 时 就 可 以 在 看 到 原本 的 Welcome to 
React Native! 文字 已 经 改 成 Welcome to React Native Rock!!!! 
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Reload 


Debug JS Remotely 


Enable Live Reload 


Enable Hot Reloading 


Toggle Inspector 


Show Perf Monitor 


Capture Heap 


Start/Stop Sampling Profiler 


Dev Settings 


Genymotion for personal use - Google Nexus 6 - 6.0.0 - AP... | 
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$a BRE 


Welcome to React Native Rock!!!! 


To get started, edit index.android.js 


Double tap R on your keyboard to reload, 
Shake or press menu button for dev menu 


< O [] 


另 ， 有 没有 感觉 在 开发 网 页 的 感觉 ?了 





动手 实践 


相信 看 到 这 里 读者 们 一 定 等 不 及 想 大 展 身手 ， 使 用 React Native 开发 你 第 一 个 
App。 俗话 说 学 习 一 项 新 技术 最 好 的 方式 就 是 做 一 个 TodoApp。 所 以 ， 接 下 来 的 文 
章 ， 笔 者 将 带 大 家 使 用 React Native 结合 Redux/ImmutableJS 和 Firebase 开发 一 


附录 二 、 用 React Native + Firebase 开发 跨 平 台 行 动 应 用 程序 (Native Mobile 
App) 


个 记录 和 删除 名 言 佳 名 (Mottos) 的 Mobile App ! 


项 目 成 果 截 图 


Life is short Delete 
Get Shit Done! Delete 
Stay focus, keep shipping Delete 
Move Fast & Break Things Delete 
Its not innovation until it gets built Delete 
Be Lean ! Delete 


Add Motto 


247 


人 台 行 动 应 用 程序 (Native Mobile 


附录 二 、 用 React Native + Firebase 开发 跨 : 
App) 





Be Lean! 


Cancel 





$ npm install --save redux react-redux immutable redux-immutable 


redux-actions uuid firebase 
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$ npm install --save-dev babel-core babel-eslint babel-loader ba 
bel-preset-es2015 babel-preset-react babel-preset-react-native e 
slint-plugin-react-native eslint eslint-config-airbnb eslint-lo 
ader eslint-plugin-import eslint-plugin-jsx-ad1y eslint-plugin-r 
eact redux-logger 


安装 完 相 关 工 具 后 我 们 可 以 初始 化 我 们 项 目 : 


// 注意 项 目 不 能 使 用 - 或 _ 命名 


$ react-native init ReactNativeFirebaseMotto 
$ cd ReactNativeFirebaseMotto 


我 们 先 准备 一 下 我 们 文件 夹 架 构 ， 将 它 设 计 成 : 


y & ReactNativeFirebaseMotto 
> O android 
C3 ios 
> C3 node modules 
v E» src 
> O actions 
» C3 components 
> © constants 
> C3 containers 
> C3 reducers 
> CJ store 
.babelrc 
.buckconfig 
.eslintrc 
.flowconfig 


.gitignore 


L2 D D DODO 


.watchmanconfig 
index.android.js 
index.ios.js 


package.json 


Firebase 简介 与 设 定 


在 这 个 项 目 中 我 们 会 使 用 到 Firebase 这 个 Back-End as Service 的 服务 ， 也 就 
是 说 我 们 不 用 自己 建立 后 端 程序 数据 库 ， 只 要 使 用 Firebase 所 提供 的 API 就 好 像 
有 了 一 个 NoSQL 数据 库 一 样 ， 当 然 Firebase 不 单 只 有 提供 数据 储存 的 功能 ， 但 限 
于 篇 幅 我 们 这 边 将 只 介绍 数据 储存 的 功能 。 


附录 二 、 用 React Native + Firebase 开发 跨 平 台 行 动 应 用 程序 (Native Mobile 
App ) 


1. 首先 我 们 进 到 Firebase 首页 


b Firebase Home Features Pricing Customers Support 


App success made simple 


The tools and infrastructure you need to build 
better apps and grow successful businesses 


GET STARTED FOR FREE 









DEVELOP 
Move fast 
SS Realtime Database 
Firebase is a mobile platform that helps you ae Authentication Ea Notifications 


quickly develop high-quality apps, grow your 
user base, and earn more money. Firebase is 
made up of complementary features that 
you can mix-and-match to fit your needs. 


Cloud Messaging 


G 
PA storage 
© 
2 


QAppindexing 


@ — Dynamic Links 


«d nes 


Hosting 


2. 登入 后 点 选 建立 项 目 ， 依 照 自己 想 取 的 项 目 名 称 命名 


Firebase 








坎 迎 继续 使 用 Firebase e. 
您 可 以 利用 下 方 的 部 分 资源 ， 继 续 透 过 Firebase 并 发 

应 用 程式 。 

BRM otu = AP 参考 资料 DP 支援 P. 

使 用 Firebase 的 专案 建立 新 专案 [ÆA GOOGLE 专案 


react-native-firebase-motto 


& react-native-firebase- 
motto.firebaseio.com 








3. 选择 将 Firebase 加 入 你 的 网 络 应 用 程序 的 按钮 可 以 取得 App ID 的 config 数 
据 ， 待 会 我 们 将 会 使 用 到 
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附录 二 、 用 React Native + Firebase 开发 跨 平 台 行 动 应 用 程序 (Native Mobile 
App ) 


Firebase 





ft = react-native-firebase.. nm Overview 


Æ) Analytics 


坎 迎 使 用 Firebase ! 请 先 在 这 里 连结 应 用 程式 。 





. 
= 
=Æ Database 





By Storage 

© Hosting 

n 将 Firebase 加 入 将 Firebase 加 入 将 Firebase 加 入 
了 您 的 ioS RE RIS 您 的 Android 应 您 的 网 路 应 用 程 
B TestLab 式 用 程式 式 

% Crash 


GROW 





F3 Notifications 


i—i IRR Firebase 


@ Dynamic Links 


Spark 升级 
免费 





4. 点 选 左 边 选 单 中 的 Database 并 点 选 Realtime Database Tab 中 的 规则 


Firebase 







f = react-native-firebase Realtime Database 


© Analytics 


DEVELOP 





a Auth 


& Database 


A Uh RSUDRBISGROERLEGÉGUSIE RR Bm 


BS Storage : ( 


© Hosting 2- "rules": { 
3 ".read": true, 
J3 Remote Config 4 ".write": true 
5 
B Test Lab 6 } 


i$ Crash 

GROW 

F3 Notifications 
@ Dynamic Links 


Spark 升级 
免费 ind 





设 定 改 为 ， 在 范例 中 为 求 简单 ， 我 们 先 不 用 验证 方式 即 可 操作 : 


{ 


"rules": T 
".read": true, 
" write": true 
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Firebase 在 使 用 上 有 许多 优点 ， 其 中 一 个 使 用 Back-End As Service 的 好 处 是 你 可 
以 专注 在 应 用 程序 的 开发 便 免 花 过 多 时 间 处 理 后 端 基 础 建设 的 部 份 ， 更 可 以 让 
Back-End 共用 在 不 同 的 client side 中 。 此 外 Firebase 在 和 React 整合 上 也 十 分 容 
务 ， 你 可 以 想 成 Firebase 负责 数据 的 储存 ， 通 过 API 和 React 组 件 互 动 ，Redux 
负责 接收 管理 client state， 若 是 监听 到 Firebase 后 端 数据 更 新 后 同步 更 新 state 并 
重新 render 页 面 。 


使 用 Flexbox 进行 UI 布局 设计 


在 React Native 中 是 使 用 Flexbox 进行 排版 ， 若 读者 对 于 Flexbox 尚 不 熟悉 ， 
建议 可 以 参考 这 篇 文章 ， 若 有 需要 游戏 化 的 学 习 工 具 ， 也 非常 推荐 这 两 个 教学 小 游 
xx, : FlexDefense ` FLEXBOX FROGGY 。 

事实 上 我 们 可 以 将 Flexbox 视 为 一 个 箱子 ， 最 外 层 是 flex containers ^ AË 
包 的 是 flex items ， 在 属性 上 也 有 分 是 针对 flex containers 还 是 针对 是 
flex items 设计 的 。 在 方向 性 上 由 左 而 右 是 main axis ， 而 上 到 下 是 cross 


axis ° 





main size 
E - = cross Start 
® 
N 
o NEN eae main axis 
o [un 
o 
o 
a 
o : P 
flex item) flex item NNNM 
1 : - - cross end 
: flex container — ! 
' » = a . 
main a main 
start o end 
o 
9 
eo 


在 Flexbox 有 许多 属性 值 ， 其 中 最 重要 的 当 数 justifyContent 和 

alignItems 以 及 flexDirection (注意 React Native Style 都 是 驼峰 式 写 
法 ) ， 所 以 我 们 这 边 主要 介绍 这 三 个 属性 : 

Flex Direction 负责 决定 整个 flex containers HAM? MARA row 也 可 以 改 


为 column ^ row-reverse 和 column-reverse ° 


附录 二 、 用 React Native + Firebase 开发 跨 平 台 行 动 应 用 程序 (Native Mobile 


flex-direction: row flex-direction: row-reverse flex-direction: column flex-direction: column-reverse 


App) 








mpg 


Justify Content 负责 决定 整个 flex containers 内 的 items 的 水 平 摆设 ， 主 要 
属性 值 有 : flex-start ^ flex-end ^ center ^ space- 


between ^ space-around ° 
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附录 二 、 用 React Native + Firebase 开发 跨 平 台 行 动 应 用 程序 (Native Mobile 
App ) 





Align Items 负责 决定 整个 flex containers 内 的 items 的 垂直 摆设 ， 主 要 属性 


值 有 : flex-start ^ flex-end ^ center ^ stretch ^ baseline 。 
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附录 二 、 用 React Native + Firebase 开发 跨 平 台 行 动 应 用 程序 (Native Mobile 
App ) 


L " 
TIT I | 


text text fei inst text text text text 






动手 实践 


有 了 前 面 的 准备 ， 现 在 我 们 终于 要 开始 进入 核心 的 应 用 程序 开发 了 | 


首先 我 们 先 设 定好 整个 App 的 入 口 文件 index.android.js ， 在 这 个 文件 中 我 们 
设 定 了 初始 化 的 设 定 和 主要 组 件 «Main /> : 
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/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
s A 


import React, { Component } from 'react'; 
impor: 
AppRegistry, 
Text, 
View 
} from 'react-native'; 
import Main from './src/components/Main'; 


class ReactNativeFirebaseMotto extends Component ( 
render() ( 
return ( 
«Main /» 


); 


AppRegistry.registerComponent('ReactNativeFirebaseMotto', () => 
ReactNativeFirebaseMotto) ; 


在 src/components/Main/Main.js 中 我 们 设 定好 整个 Component 的 布局 和 并 

将 Firebase 引入 并 初始 化 ， 将 操作 Firebase 数据 库 的 参考 往 下 传 ， 根 节点 我 们 
命名 为 items ， 所 以 之 后 所 有 新 增 的 motto 都 会 在 这 个 根 节点 之 下 并 拥有 特定 的 
key 值 。 在 Main 我 们 同样 规划 了 整个 布局 ， 包 括 : <ToolBar 

/> ^ <MottoListContainer /> ^ <ActionButtonContainer 


/> ^ «InputModalContainer /> ° 


import React from 'react'; 
import ReactNative from 'react-native'; 
import { Provider } from 'react-redux'; 


import ToolBar from '../ToolBar'; 

import MottoListContainer from '../../containers/MottoListContai 
ner'; 

import ActionButtonContainer from '../../containers/ActionButton 
Container'; 

import InputModalContainer from '../../containers/InputModalCont 
ainer'; 

import ListItem from '../ListItem'; 


import * as firebase from 'firebase'; 
// 将 Firebase 的 config 4&5] A 


import [ firebaseConfig ) from '../../constants/config'; 
// 引用 Redux store 
import store from '../../store'; 


const ( View, Text ) - ReactNative; 


// Initialize Firebase 

const firebaseApp - firebase.initializeApp(firebaseConfig); 

// Create a reference with .ref() instead of new Firebase(url) 
const rootRef - firebaseApp.database().ref(); 

const itemsRef = rootRef.child('items'); 


// 将 Redux 的 store 通过 Provider # Tf 
const Main = () => ( 
<Provider store={store}> 
<View> 
<ToolBar style={styles.toolBar} /> 
<MottoListContainer itemsRef={itemsRef} /> 
<ActionButtonContainer /> 
«InputModalContainer itemsRef={itemsRef} /> 
</View> 
</Provider> 


); 


export default Main; 


设 定 完了 基本 的 布局 方式 后 我 们 来 设 定 Actions 和 其 使 用 的 常 


数 ， src/actions/mottoActions.js 


export const GET_MOTTOS = 'GET_MOTTOS'; 

export const CREATE_MOTTO = 'CREATE_MOTTO'; 
export const SET IN MOTTO = 'SET IN MOTTO'; 
export const TOGGLE MODAL = 'TOGGLE MODAL'; 


我 们 在 constants 文件 夹 中 也 设 定 了 我 们 整个 data 的 数据 结构 ， 以 下 是 


src/constants/models.js 


import Immutable from 'immutable'; 


export const MottoState = Immutable. fromJS({ 
mottos: [], 
motto: { 
quee 
texti [5 
updatedAt: '', 
} 
3); 


export const UiState = Immutable.fromJS(( 
isModalVisible: false, 


3); 


还 记得 我 们 提 到 的 Firebase config *E ? 这 边 我 们 把 相关 的 设 定 档 放 
在 src/configs/config.js 中 : 


export const firebaseConfig = { 
apiKey: "apikey", 
authDomain: "authDomain", 
databaseURL: "databaseURL", 
storageBucket: "storageBucket", 


e 


在 我 们 应 用 程序 中 同样 使 用 了 redux 和 redux-actions 。 在 这 个 范例 中 我 们 

设计 了 : GET MOTTOS ` CREATE MOTTO ` SET IN MOTTO 三 个 操作 motto 
的 action > 2- 9I 4X & A Firebase 取出 数据 、 新 增 数 据 和 set 数据 。 以 下 是 
src/actions/mottoActions.js 


import { createAction } from 'redux-actions'; 
import { 

GET_MOTTOS, 

CREATE_MOTTO, 

SET_IN_MOTTO, 
) from '../constants/actionTypes'; 


export const getMottos - createAction('GET MOTTOS'); 
export const createMotto = createAction('CREATE MOTTO'); 
export const setInMotto = createAction('SET IN MOTTO'); 


同样 地 ， 由 于 我 们 设计 了 当 使 用 者 想 新 增 motto 时 会 跳出 modal， 所 以 我 们 可 以 设 
定 一 个 TOGGLE MODAL 负责 开关 modal 的 state。 以 下 是 


src/actions/uiActions.js 


import { createAction } from 'redux-actions'; 


import { 
TOGGLE_MODAL, 
} from '../constants/actionTypes'; 


export const toggleModal = createAction('TOGGLE MODAL'); 


以 下 是 src/actions/index.js ， 用 来 输出 我 们 的 actions : 


export * from './uiActions'; 
export * from './mottoActions'; 


设 定 完 我 们 的 actions 后 我 们 来 设 定 reducers， 在 这 边 我 们 同样 使 用 redux- 
actions 整合 ImmutableJS ^ 


import { handleActions } from 'redux-actions'; 
// 引入 initialState 


import { 

MottoState 
p from '..7--/7constants/models-'. 
import { 


GET MOTTOS, 
CREATE MOTTO, 
SET IN MOTTO, 
) from '../../constants/actionTypes'; 


// 通过 set 和 seIn 可 以 产生 newState 
const mottoReducers = handleActions({ 
GET_MOTTOS: (state, { payload }) => ( 
state.set( 
Pmottos | 
payload.mottos 
) 


); 
CREATE MOTTO: (state) => ( 


state.set( 
'mottos', 
state.get('mottos').push(state.get('motto')) 
) 


), 
SET IN MOTTO: (state, { payload }) => ( 


state.setIn( 
payload.path, 
payload.value 


) 
}, MottoState); 


export default mottoReducers; 


以 下 是 src/reducers/uiState.js 


import { handleActions } from 'redux-actions'; 


import { 
UiState, 
) from '../../constants/models'; 
import { 
TOGGLE_MODAL, 
} from '../../constants/actionTypes'; 


// modal 的 显示 与 否 
const uiReducers = handleActions({ 
TOGGLE_MODAL: (state) => ( 
state.set( 
'isModalVisible', 
Istate.get('isModalVisible') 
) 


), 
}, UiState); 


export default uiReducers; 


以 下 是 src/reducers/index.js ， 将 所 有 reducers combine 在 一 起 : 


import { combineReducers } from 'redux-immutable'; 
import ui from './ui/uiReducers'; 
import motto from './data/mottoReducers'; 


const rootReducer = combineReducers({ 
ui, 
motto, 


}); 


export default rootReducer; 


通过 src/store/configureStore.js 将 reducers 和 initialState 以 及 要 使 用 的 
middleware 整合 成 store : 


import { createStore, applyMiddleware } from 'redux'; 
import createLogger from 'redux-logger'; 

import Immutable from 'immutable'; 

import rootReducer from '../reducers'; 


const initialState = Immutable.Map(); 


export default createStore( 

rootReducer, 

initialState, 

applyMiddleware(createLogger({ stateTransformer: state => stat 
e.toJS() })) 
); 


设 定 完 数据 层 的 架构 后 ， 我 们 又 重新 回 到 View 的 部 份 ， 我 们 开始 依 序 设 定 我 们 的 
Component 和 Container。 首 先 ， 我 们 先 设 计 我 们 的 标题 列 ToolBar ， 以 下 是 


src/components/ToolBar/ToolBar.js 


import React from 'react'; 

import ReactNative from 'react-native'; 
import styles from './toolBarStyles'; 
const ( View, Text ) - ReactNative; 


const ToolBar = () => ( 
«View style={styles.toolBarContainer }> 
<Text style={styles.toolBarText}>Startup Mottos</Text> 
</View> 


); 


export default ToolBar; 


以 下 是 src/components/ToolBar/toolBarStyles.js ， 将 底 色 设 定 为 黄色 ， 文 
字 置 中 : 


import { StyleSheet } from 'react-native'; 


export default StyleSheet .create({ 
toolBarContainer: { 
height: 40, 
justifyContent: 'center', 
alignItems: 'center', 
flexDirection: 'column', 
backgroundColor: '#ffeb3b', 
ty 
toolBarText: { 
fontSize: 20, 
color: #212024" 
} 
}); 


以 下 是 src/components/MottoList/MottoList.js ， 这 个 Component 中 稍微 
复杂 一 些 ， 主 要 是 使 用 到 了 React Native 中 的 ListView Component 将 数据 结构 传 
3t dataSource， 通 过 renderRow 把 一 个 个 row 给 render 出 来 ， 过 程 中 我 们 通过 

!Immutable.is(ri.get('id'), r2.get('id')) 去 判断 整个 ListView 画面 是 
否 需 要 loading 新 的 item 进来 ， 这 样 就 可 以 提高 整个 ListView 的 性 能 。 


import React, { Component } from 'react'; 
import ReactNative from 'react-native'; 
import Immutable from 'immutable'; 

import ListItem from '../ListItem'; 

import styles from './mottoStyles'; 

const { View, Text, ListView } = ReactNative; 


class MottoList extends Component { 
constructor(props) { 
super (props); 
this.renderListItem = this.renderListItem.bind(this); 
this.listenForItems = this.listenForItems.bind(this); 
this.ds = new ListView.DataSource({ 
rowHasChanged: (r1, r2) => !Immutable.is(r1.get('id'), r2. 
get('id')), 
}) 


} 


renderListItem(item) { 
return ( 
<ListItem item={item} onDeleteMotto={this.props.onDeleteMo 
tto} itemsRef={this.props.itemsRef} /> 
); 
} 
listenForItems(itemsRef) { 
itemsRef.on('value', (snap) => { 
if(snap.val() === null) { 
this.props.onGetMottos(Immutable.fromJS([])); 
) else ( 
this.props.onGetMottos(Immutable.fromJS(snap.val())); 


3); 
} 


componentDidMount() { 
this.listenForItems(this.props.itemsRef); 
} 
render() { 
return ( 
<View> 
<ListView 
style={styles.listView} 
dataSource={this.ds.clonewithRows(this.props.mottos.to 
Array())} 
renderRow={this.renderListItem} 
enableEmptySections={true} 
/> 
</View> 


); 


export default MottoList; 


以 下 是 src/components/MottoList/mottoListStyles.js ， 我 们 使 用 到 了 
Dimensions， 可 以 根据 屏幕 的 高 度 来 设 定 整个 ListView 高 度 : 


import { StyleSheet, Dimensions } from 'react-native'; 
const { height } = Dimensions.get('window'); 
export default StyleSheet .create({ 
listView: { 
flex: 1, 
flexDirection: 'column', 
height: height - 105, 
ty 
3); 


以 下 是 src/components/ListItem/ListItem.js ， 我 们 从 props 2] SLA 
进来 的 motto item， 显 示 出 motto 文字 内 容 。 当 我 们 点 击 
<TouchableHighlight> 时 就 会 删除 该 motto。 


import React from 'react'; 

import ReactNative from 'react-native'; 

import styles from './listItemStyles'; 

const ( View, Text, TouchableHighlight ) - ReactNative; 


const ListItem = (props) => ( 
return ( 
«View style={styles.listItemContainer }> 
«Text style={styles.listItemText}>{props.item.get('text')} 
</Text> 
<TouchableHighlight onPress={props.onDeleteMotto(props.ite 
m.get('id'), props.itemsRef)}> 
<Text>Delete</Text> 
</TouchableHighlight> 
</View> 
) 
H 


export default ListItem; 


以 下 是 src/components/ListItem/listItemStyles.js 


import { StyleSheet } from 'react-native'; 


export default StyleSheet .create({ 
listItemContainer: { 
flex: 1, 
flexDirection: 'row', 
padding: 10, 
margin: 5, 
ty 
listItemText: { 
flex: 10, 
fontSize: 18, 
color: 4212121", 
} 
}); 


以 下 是 src/components/ActionButton/ActionButton.js ， 当 点 击 了 按钮 则 会 
触发 onToggleModal 方法 ， 出 现 新 增 motto 的 modal : 


import React from 'react'; 

import ReactNative from 'react-native'; 

import styles from './actionButtonStyles'; 

const { View, Text, Modal, TextInput, TouchableHighlight } = Rea 
ctNative; 


const ActionButton = (props) => ( 
<TouchableHighlight onPress={props.onToggleModal}> 
«View style={styles.buttonContainer }> 
<Text style={styles.buttonText}>Add Motto</Text> 
</View> 
</TouchableHighlight> 
); 


export default ActionButton; 


以 下 是 src/components/ActionButton/actionButtonStyles. js 


import { StyleSheet } from 'react-native'; 


export default StyleSheet .create({ 
buttonContainer: { 
height: 40, 
justifyContent: 'center', 
alignItems: 'center', 
flexDirection: 'column', 
backgroundColor: '#66bb6a', 
ty 
buttonText: { 
fontSize: 20, 
color: '#e8f5e9' 
} 
}); 


以 下 是 src/components/InputModal/InputModal.js > X i. € ñ it Modal 
Component 的 设计 ， 当 输入 内 容 会 触发 onChangeMottoText & Ji action > 7x: %49 
是 当 按 下 送出 键 ， 同 时 会 把 Firebase 的 参考 itemsRef 送 入 onCreateMotto 中 ， 方 
便 通过 API 去 即时 新 增 到 Firebase Database， 并 更 新 client state 和 重新 泻 染 了 
View : 


import React from 'react'; 
import ReactNative from 'react-native'; 
import styles from './inputModelStyles'; 
const { View, Text, Modal, TextInput, TouchableHighlight } = Rea 
ctNative; 
const InputModal = (props) => ( 
<View> 
<Modal 
animationType={"slide"} 
transparent={false} 
visible={props.isModalVisible} 
onRequestClose={props.onToggleModal} 
> 
<View> 
<View> 
<Text style={styles.modalHeader}>Please Keyin your Motto! 


附录 二 、 用 React Native + Firebase 开发 跨 平 台 行 动 应 用 程序 (Native Mobile 
App ) 


</Text> 
<TextInput 
onChangeText={props.onChangeMottoText } 
/> 
<View style={styles.buttonContainer }> 
<TouchableHighlight 
onPress={props.onToggleModal} 
style-([styles.cancelButton]) 


«Text 
style-(styles.buttonText) 


Cancel 
</Text> 
</TouchableHighlight> 
<TouchableHighlight 
onPress={props.onCreateMotto(props.itemsRef ) } 
style={[styles.submitButton]} 


<Text 
style-(styles.buttonText) 


Submit 
«/Text» 
</TouchableHighlight> 
</View> 
</View> 
</View> 
</Modal> 
</View> 


); 


export default InputModal; 
rrr | 


以 下 是 src/components/InputModal/inputModalStyles. js 
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import { StyleSheet } from 'react-native'; 


export default StyleSheet .create({ 

modalHeader: { 
flex: 1, 
height: 30, 
padding: 10, 
flexDirection: 'row', 
backgroundColor: '#ffc107', 
fontSize: 20, 

tr 

buttonContainer: { 
flex: 1, 
flexDirection: 'row', 

ty 

button: ( 
borderRadius: 5, 

tr 

cancelButton: { 
flex: 1, 
height: 40, 
alignitems: 'center', 
justifyContent: 'center', 
backgroundColor: '#eceff1', 
margin: 5, 

i 

submitButton: { 
flex: 1, 
height: 40, 
alignitems: 'center', 
justifyContent: 'center', 
backgroundColor: '#4fc3f7', 
margin: 5, 

tr 

buttonText: { 
fontSize: 20, 

} 

}); 


设 定 完 了 Component， 我 们 来 探讨 一 下 Container 的 部 份 。 以 下 是 
src/containers/ActionButtonContainer/ActionButtonContainer.js 


import { connect } from 'react-redux'; 
import ActionButton from '../../components/ActionButton'; 
import { 
toggleModal, 
Wcom y oe dct dons s 


export default connect( 
(state) => ({}), 
(dispatch) => ({ 
onToggleModal: () => ( 
dispatch(toggleModal()) 
) 


3) 
)(ActionButton); 


以 下 是 src/containers/InputModalContainer/InputModalContainer.js 


import { connect } from 'react-redux'; 
import InputModal from '../../components/InputModal'; 
import Immutable from 'immutable'; 


import { 
toggleModal, 
setInMotto, 
createMotto, 

Pom “sc/s./actlons: | 

import uuid from 'uuid'; 


export default connect( 

(state) => ({ 
isModalVisible: state.getIn(['ui', 'isModalVisible']), 
motto: state.getIn(['motto', 'motto']), 

3) 

(dispatch) => (( 
onToggleModal: () => ( 

dispatch(toggleModal()) 


), 
onChangeMottoText: (text) => ( 


dispatch(setInMotto(( path: ['motto', 'text'], value: text 
})) 
), 
// #38 motto 是 通过 itemsRef 将 新 增 的 motto push 进去 ， 新 增 后 要 把 
本 地 端的 motto 清空 ， 并 关闭 modal : 
onCreateMotto: (motto) => (itemsRef) => () => { 
itemsRef.push({ id: uuid.v4(), text: motto.get('text'), up 
datedAt: Date.now() }); 
dispatch(setInMotto({ path: ['motto'], value: Immutable.fr 
omJS(( id: '', text: '', updatedAt: '' })})); 
dispatch(toggleModal()); 
} 
3) 


(stateToProps, dispatchToProps, ownProps) -» ( 
const ( motto } = stateToProps; 
const ( onCreateMotto } = dispatchToProps; 
return Object.assign({}, stateToProps, dispatchToProps, ownP 
rops, { 
onCreateMotto: onCreateMotto(motto), 
}); 


ty 
)(InputModal); 


以 下 是 src/containers/MottoListContainer/MottoListContainer.js 


import { connect } from 'react-redux'; 

import MottoList from '../../components/MottoList'; 
import Immutable from 'immutable'; 

import uuid from 'uuid'; 


import { 
createMotto, 
getMottos, 
changeMottoTitle, 

jer ROM o e /actlions 


export default connect( 


(state) => ({ 
mottos: state.getIn(['motto', 'mottos']), 
3) 
(dispatch) => (( 
onCreateMotto: () => ( 
dispatch(createMotto()) 
), 
onGetMottos: (mottos) => ( 
dispatch(getMottos({ mottos })) 
), 
onChangeMottoTitle: (title) => ( 
dispatch(changeMottoTitle({ value: title })) 


); 


// 判断 点 击 的 是 哪 一 个 item 取出 其 key? MH itemsRef FHBH 
onDeleteMotto: (mottos) => (id, itemsRef) => () => { 
mottos.forEach((value, key) => { 


if(value.get('id') === id) { 
itemsRef.child(key).remove(); 
j 
3); 
j 
3) 


(stateToProps, dispatchToProps, ownProps) => { 
const { mottos } = stateToProps; 
const { onDeleteMotto } = dispatchToProps; 
return Object.assign({}, stateToProps, dispatchToProps, ownP 
rops, { 
onDeleteMotto: onDeleteMotto(mottos), 
}); 


} 
)(MottoList); 


最 后 我 们 可 以 通过 启动 模拟 器 后 使 用 以 下 命令 开启 我 们 App ! 


$ react-native run-android 


最 后 的 成 果 : 


附录 二 、 用 React Native + Firebase 开发 跨 平 台 行 动 应 用 程序 (Native Mobile 
App) 


Life is short Delete 
Get Shit Done! Delete 
Stay focus, keep shipping Delete 
Move Fast & Break Things Delete 
Its not innovation until it gets built Delete 
Be Lean ! Delete 


Add Motto 


同时 你 可 以 在 Firebase 后 人 台 进 行 观 察 ， 当 呼叫 Firebase API 进行 数据 更 改 时 ， 
Firebase Realtime Database 就 会 即时 更 新 : 
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附录 二 、 用 React Native + Firebase 开发 跨 平 台 行 动 应 用 程序 (Native Mobile 
App) 


Firebase 









a Realtime Database 





ft = react-native-firebase... 





Æ Analytics 


DEVELOP 


© https;//react-native-firebase-mo-c0829 firebaseio.com/ O O : 


an Auth 


&3J Database 

react-native-firebase-mo-c0829 
B3 Storage : 
(-|~ items 
© Hosting È- -KQUgFICELRXNLbCc2UI 


| id: "8372f646-0bc5-4608-a64b-15639bf1854c 






Jj Remote Config 





p text: “Life is short" 

| L. - updatedAt: 1472631737483 

Boe -QUhCEdxwX4epiBNUey 

i ~ id: "ac15b3db-7257-477d-9850-143d1d618e73 


B Test Lab 


| = text: "Get Shit Done!" 


B Notifications i 
i-.updatedAt: 1472631985386 


P D ic Link: ; 

人 È- -KQUhse6cPjwMYwJgUAA 
| 

m D- -KQUhrOmBhths J6SfT1p 

INK 升级 Q- -KQUhwUZmWYgtu6bCdqd 


o- -KQUiguVxMxIZIjp6Go0 





REAR ! 你 已 经 完成 了 你 的 第 一 个 React Native App， 若 你 希望 将 你 开发 的 应 用 程 
序 审核 后 上 架 ， 请 参考 官方 的 说 明文 件 ， 当 你 完成 审核 打包 等 流程 后 ， 我 们 可 以 获 
得 .apk 档 ， 这 时 就 可 以 上 架 到 app store 让 隔壁 班 的 女生 心仪 ， 啊 不 是 ， 是 广大 的 
Android 使 用 者 使 用 你 的 App È ! 当然 ， 由 于 我 们 的 代码 可 以 100% 共用 于 iOS 和 
Android 端 ， 所 以 你 也 可 以 同步 上 架 到 Apple Store ! 


延伸 阅读 


React Native 官方 网 站 

React 官方 网 站 

Redux 官方 文件 

lonic Framework vs React Native 

How to Build a Todo App Using React, Redux, and Immutable.js 
Your First Immutable React & Redux App 

React, Redux and Immutable.js: Ingredients for Efficient Web Applications 
. Full-Stack Redux Tutorial 

. redux immutable X: 44] 

. gajus/redux-immutable 

. acdlite/redux-actions 

. Flux Standard Action 


po N oO a ee I 


= a a 
N 一 O «qo 
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附录 二 、 用 React Native + Firebase 开发 跨 平 台 行 动 应 用 程序 (Native Mobile 

App) 

13. React Native ImmutableJS ListView Example 

14. React Native 0.23.1 warning: 'In next release empty section headers will be 
rendered’ 

15. js.coach 

16. React Native Package Manager 

17. React Native 学 习 笔 记 

18. The beginners guide to React Native and Firebase 

19. Authentication in React Native with Firebase 

20. bruz/react-native-redux-groceries 

21. Building a Simple ToDo App With React Native and Firebase 

22. Firebase Permission Denied 

23. Best Practices: Arrays in Firebase 

24. Avoiding plaintext passwords in gradle 

25. Generating Signed APK 


(image via moduscreate ^ css-tricks ` teamtreehouse ` teamtreehouse ^ css- 
tricks ^ css-tricks) 


‘door: 4£ XT] 


| 回首 页 | 上 一 章 : 附录 一 、React ES5 ` ES6* 常见 用 法 对 照 表 | 下 一 章 : 附录 
三 、React 测试 入 门 教学 | 


| 纠 错 、 提 问 或 许愿 | 
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RE > React 测试 入 门 教学 


附录 三 、React 测试 入 门 教学 





测试 是 软体 开发 中 非常 重要 的 一 个 环节 ， 本 章 我 们 将 带领 大 家 从 编写 最 简单 的 测试 
代码 到 整合 Mocha + Chai 官方 提供 的 测试 工具 和 Airbnb 所 设计 的 Enzyme 进 
行 React 测试 。 


Mocha 测试 初 体验 


az 


Mocha 是 目前 颇 为 流行 的 JavaScript 测试 框架 之 一 ， 其 可 以 很 方便 使 用 于 浏览 器 
端 和 Node 环境 。 


Mocha is a feature-rich JavaScript test framework running on Node.js and in 
the browser, making asynchronous testing simple and fun. Mocha tests run 
serially, allowing for flexible and accurate reporting, while mapping uncaught 
exceptions to the correct test cases. 


除了 Mocha 外 ， 尚 有 许多 JavaScript 单元 测试 工具 可 以 选择 ， 例 
如 : Jasmine ` Karma 等 。 但 本 章 我 们 主要 使 用 Mocha + Chai 结合 React È 
方 测试 工具 和 Enzyme 进行 讲解 。 
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在 这 边 我 们 先 介 绍 一 些 比较 常用 的 Mocha 使 用 方法 ， 让 大 家 熟悉 测试 的 用 法 (XE 
是 已 经 熟悉 编写 测试 代码 的 读者 这 部 份 可 以 跳 过 ) 


1. 安装 环境 与 套件 


安装 


react 和 react-dom 


$ npm install --save react react-dom 


可 以 在 全 域 安装 mocha : 


$ npm install --global mocha 


也 可 以 在 开发 环境 下 本 地 端 安 装 (同时 安装 了 babel ^ eslint ^ webpack 等 相关 
套件 ， 其 中 以 mocha ` chai ` babel 为 主要 必须 ) 


$ npm install --save-dev babel-core babel-loader babel-esli 


nt babel-preset-react babel-preset-es2015 eslint eslint-conf 
ig-airbnb eslint-loader eslint-plugin-import eslint-plugin-j 


sx-ally eslint-plugin-react webpack webpack-dev-server html- 


webpack-plugin chai mocha 


2. 测试 代码 


3. 整合 assertion 函数 库 Chai 


describe (test suite) : 表示 一 组 相关 的 测试 。 describe 为 一 个 函数 ， 
第 一 个 参数 为 test suite 的 名 称 ， 第 二 个 参数 为 实际 执行 的 函数 。 


i. it (testcase) : 表示 一 个 单独 测试 ， 为 测试 里 最 小 单位 。 it 为 一 个 遂 


数 ， 第 一 个 参数 为 test case 的 描述 名 称 ， 第 二 个 参数 为 实际 执行 的 


在 测试 代码 中 会 包含 一 个 或 多 个 test suite ;而 每 个 test suite 


则 会 包含 一 个 或 多 个 test case ° 


所 谓 的 assertion (BTS) ， 就 是 判断 代码 的 执行 成 果 是 否 和 预期 一 样 ， 若 是 不 
一 致 则 会 发 生 错误 。 通 常 一 个 test case 会 拥有 一 个 或 多 个 assertion » YT 
Mocha 本 身 是 一 个 测试 框架 ， 但 不 包含 assertion， 所 以 我 们 使 用 Chai 这 个 适 


用 于 浏览 器 端 和 Node 端的 BDD / TDD assertion library » Æ Chai 中 共 提 供 三 
种 操作 assertion 介面 风格 : Expect、Assert、Should， 在 这 边 我 们 选择 使 用 
比较 接近 自然 语言 的 Expect 。 


基本 上 ，expect assertion 的 写法 都 是 类 似 : 开头 为 expect 方法 + to X 
to.be + 2% assertion 方法 (例如 : equal、a/an、ok、match) 


. Mocha 基本 用 法 


mocha 若 没 指定 要 执行 哪个 文件 ， 预 设 会 执行 test 文件 夹 下 第 一 层 的 测试 
Ko BRIE test 文件 夹 中 的 子 文件 夹 测试 码 也 执行 则 要 加 上 -- 


recursive 参数 。 


包含 子 文件 夹 : 

$ mocha --recursive 
Hipp 

$ mocha file1.js 
也 可 以 指定 多 个 文件 


$ mocha file1.js file2.js 


现在 ， 我 们 来 编写 一 个 简单 的 测试 程序 ， 亲 身 感 受 一 下 测试 的 感觉 。 以 下 是 
react-mocha-test-example/src/modules/add.js ， 一 个 加 法 的 函数 : 


const add = (x, y) => ( 
x+y 


); 


export default add; 


接著 我 们 编写 测试 这 个 函数 的 代码 ， 测 试 是 否 正 确 。 以 下 是 react-mocha- 
test-example/src/test/add.test.js 


// test add.js 
import add from '../src/modules/add'; 
import { expect } from 'chai'; 


// describe is test suite, it is test case 
describe('test add function', () => ( 
iid leas oer Divya O s 
expect(add(1, 1)).to.be.equal(2) 
)) 
)); 


在 开始 执行 mocha 后 由 于 我 们 使 用 了 ，ES6 的 语法 所 以 必须 使 用 bable 3t 
行 转译 ， 否 则 会 出 现 类 似 以 下 的 错误 : 


import add from '../src/modules/add'; 
AAAAA^ 


我 们 先行 设 定 .bablerc ， 我 们 在 之 前 已 经 有 安装 babel 相关 套件 和 
presets 所 以 就 会 将 ES2015 语法 转译 。 


1 
"presets": [ 
"es2015", 
"react", 
], 
"plugins": [] 
J 


此 时 ， 我 们 更 改 package.json 中 的 scripts ， 这 样 方便 每 次 测试 执行 : 


若是 使 用 本 地 端 : 


$ ./node modules/mocha/bin/mocha --compilers js:babel-core/ 
register 


若是 使 用 全 域 : 


$ mocha --compilers js:babel-core/register 


若是 一 切 顺 利 ， 我 们 就 可 以 看 到 执行 测试 成 功 的 结果 : 
` $ mocha add.test.js 


test add function 


4 q.122 


1 passing (181ms) 


. Mocha 指令 参数 


在 Mocha 中 有 许多 可 以 使 用 的 好 用 参数 ， 例 如 : --recursive 可 以 执行 执 
行 测试 文件 夹 下 的 子 文件 夹 代码 、 --reporter 格式 更 改 测试 报告 格式 ( 预 
设 是 spec ， 也 可 以 更 改 为 tap ) ^ --watch 用 来 监控 测试 代码 ， 当 有 
测试 代码 更 新 就 会 重新 执行 、 --grep MRASAH A test case ^ 


以 上 这 些 参数 我 们 可 以 都 整理 在 test 文件 夹 下 的 mocha.opts 文件 中 当 
作 设 定数 据 ， 此 时 再 次 执行 npm run test 就 会 把 参数 也 使 用 进去 。 


--Watch 
--reporter spec 


. EMG Ma 


在 上 面 我 们 讨论 的 主要 是 同步 的 状况 ， 但 实际 上 在 开发 应 用 时 往往 会 遇 到 非 同 
步 的 情形 。 而 在 Mocha 中 每 个 test case 最 多 允许 执行 2000 毫秒 ， 当 时 间 超 
过 就 会 显示 错误 。 为 了 解决 这 个 问题 我 们 可 以 在 package.json 中 更 

改 : "test": "mocha -t 5000 --compilers js:babel-core/register" 

文件 。 


为 了 模拟 测试 非 同步 的 情境 ， 所 以 我 们 必须 先 安 装 axios » 


$ npm install --save axios 


以 下 是 react-mocha-test-example/src/test/async.test.js 


import axios from 'axios'; 
import { expect } from 'chai'; 


it( ‘asynchronous return an object', function(done)( 
axios 
-get('https://api.github.com/users/torvus') 
.then(function (response) ( 
expect(response).to.be.an('object'); 
done(); 
}) 
.catch(function (error) { 
console.log(error); 
3); 
3); 


由 于 测试 环境 是 在 Node 中 ， 所 以 我 们 必须 先 安装 node-fetch 来 展现 promise 
的 情境 。 


$ npm install --save node-fetch 


以 下 是 react-mocha-test-example/src/test/promise.test.js 


import fetch from 'node-fetch'; 
import { expect } from 'chai'; 


it( ‘asynchronous fetch promise’, function() { 
return fetch('https://api.github.com/users/torvus' ) 
.then(function(response) { return response.json() }) 
.then(function(json) { 
expect(json).to.be.an('object'); 
3); 
3); 


3. 测试 使 用 的 hook 


在 Mocha 中 的 test suite 中 ， 有 before()、after()、beforeEach() 和 
afterEach() 四 种 hook， 可 以 让 你 设计 在 特定 时 间 点 执行 测试 。 


describe('hooks', function() { 
before(function() ( 
// 在 before 中 的 test case 会 在 所 有 test cases 前 执行 
3); 
after(function() ( 
// 在 after 中 的 test case 会 在 所 有 test cases 后 执行 
3); 
beforeEach(function() { 
// 在 beforeEach 中 的 test case 会 在 每 个 test cases 前 执行 
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afterEach(function() { 
// 在 afterEach 中 的 test case 会 在 每 个 test cases 后 执行 


}); 


// test cases 
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动手 实践 


在 上 面 我 们 已 经 先 讲解 了 Mocha + Chai 测试 工具 和 基础 的 测试 写法 。 现 在 接 
著 我 们 要 来 探讨 React 中 的 测试 用 法 。 然 而 ， 要 在 React 中 测试 Component 以 及 
JSX 语法 时 ， 使 用 传统 的 测试 工具 并 不 方便 ， 所 以 要 整合 Mocha + Chai 官方 
提供 的 测试 工具 和 Airbnb 所 设计 的 Enzyme (由 于 官方 的 测试 工具 使 用 起 来 不 太 方 
便 所 以 有 第 三 方针 对 其 进行 封装 ) 进行 测试 。 


使 用 官方 测试 工具 


我 们 知道 在 React 一 个 重要 的 特色 为 Virtual DOM 所 以 在 官方 的 测试 工具 中 有 提供 
测试 Virtual DOM 的 方法 : Shallow Rendering (createRenderer) > UA MAS 
DOM 的 方法 : DOM Rendering (renderlntoDocument) ° 


1. Shallow Rendering (createRenderer ) 


Shallow Rendering 系 指 将 一 个 Virtual DOM 7€ RRF Component > 12 Ria 
染 第 一 层 ， 不 泻 染 所 有 子 组 件 ， 因 此 处 理 速度 快 且 不 需要 DOM IÈ » Shallow 
rendering 在 单元 测试 非常 有 用 ， 由 于 只 测试 一 个 特定 的 component’ 而 重要 
的 不 是 它 的 children » ix 4, & v3 7X E — A child component 不 会 影响 parent 
component 的 测试 。 


以 下 是 react-addons-test-utils- 


example/src/test/shallowRender.test.js 


import React from 'react'; 

import TestUtils from 'react-addons-test-utils'; 
import { expect } from 'chai'; 

import Main from '../src/components/Main'; 


function shallowRender(Component) { 
const renderer = TestUtils.createRenderer(); 
renderer.render(<Component/>) ; 
return renderer.getRenderOutput(); 


describe('Shallow Rendering', function () { 
it('Main title should be hi', function () { 
const todoItem = shallowRender (Main); 
expect (todoItem.props.children[0].type).to.equal('hi'); 
expect (todoItem.props.children[0].props.children).to.eq 
ual('Todos'); 
3); 
3): 


以 下 是 react-addons-test-utils- 


example/src/test/shallowRenderProps.test.js 


import React from 'react'; 

import TestUtils from 'react-addons-test-utils'; 
import { expect } from 'chai'; 

import TodoList from '../src/components/TodoList'; 


const shallowRender = (Component, props) => { 
const renderer = TestUtils.createRenderer(); 
renderer.render(<Component {...props}/>); 
return renderer.getRenderOutput(); 


describe('Shallow Props Rendering', () => { 
it('TodoList props check', () => { 
const todos = [{ id: 0, text: 'reading'}, { id: 1, text 
'coding')]; 
const todoList = shallowRender(TodoList, (todos: todos} 
); 
expect(todoList.props.children.type).to.equal('ul'); 
expect(todoList.props.children.props.children[0].props. 
children).to.equal('reading'); 
expect(todoList.props.children.props.children[1].props. 
children).to.equal('coding'); 
3); 
3); 


. DOM Rendering (renderlntoDocument) 


注意 ， 因 为 Mocha 运行 在 Node 环境 中 ， 所 以 你 不 会 存 取 到 DOM。 所 以 我 们 
要 使 用 JSDOM 来 模拟 真实 DOM 环境 。 同 时 我 在 这 边 引 入 react-dom ， 这 
样 我 们 就 可 以 使 用 findDOMNode 来 选取 元 素 。 事 实 上 ，findDOMNode 方法 
的 最 大 优势 是 提供 比 TestUtils 更 好 的 CSS 选择 器 ， 方 便 开 发 者 选择 元 素 。 


以 下 是 react-addons-test-utils-example/src/test/setup.test.js 


import jsdom from 'jsdom'; 


if (typeof document === 'undefined') { 
global.document = jsdom.jsdom('<!doctype html><html><head 
></head><body></body></htm1>' ); 
global.window = document.defaultView; 
global.navigator = global.window.navigator; 


以 下 是 react-addons-test-utils- 


example/src/components/TodoHeader/TodoHeader. js 


import React from 'react'; 


class TodoHeader extends React.Component { 
constructor(props) { 
super(props); 
this.toggleButton = this.toggleButton.bind(this); 
this.state = { 
isActivated: false, 
H 
} 
toggleButton() { 
this.setState({ 
isActivated: !this.state.isActivated, 
}) 
} 
render() { 
return ( 
<div> 
<button disabled={this.state.isActivated} onClick={ 
this .toggleButton}>Add</button> 
</div> 
); 
}; 


export default TodoHeader; 


需要 留意 的 是 若是 stateless components 使 用 
TestUtils.renderlntoDocument， 要 将 renderlntoDocument 包 在 <div> 
</div> 内 ， 使 用 findDOMNode(TodoHeaderApp).children[0] 取得 ， 不 
然 会 回 传 null。 更 进一步 细节 可 以 参考 这 里 。 不 过 由 于 我 们 是 使 用 class- 
based Component 所 以 不 会 遇 到 这 个 问题 。 


以 下 是 react-addons-test-utils- 


example/src/test/renderIntoDocument.test.js 


import React from 'react'; 

import TestUtils from 'react-addons-test-utils'; 
import { expect } from 'chai'; 

import ( findDOMNode ) from 'react-dom'; 

import TodoHeader from '../src/components/TodoHeader'; 


describe('Simulate Event', function () { 
it('When click the button, it will be toggle', function ( 


DU 


const TodoHeaderApp = TestUtils.renderIntoDocument («Tod 
oHeader />); 

const TodoHeaderDOM - findDOMNode(TodoHeaderApp); 

const button - TodoHeaderDOM.querySelector('button'); 

TestUtils.Simulate.click(button); 

let todoHeaderButtonAfterClick = TodoHeaderDOM.querySel 
ector('button').disabled; 

expect(todoHeaderButtonAfterClick).to.equal(true); 


}); 
}); 


3% pè 4€ DOM 的 测试 方式 类 似 于 JavaScript 或 jQuery 的 DOM 操作 。 首 先 

要 先 找到 要 想 操作 的 目标 节点 ， 而 后 触发 想 要 执行 的 动作 ， 在 官方 测试 工具 中 
拥有 许多 可 以 协助 选取 节点 的 方法 。 然 而 由 于 其 在 使 用 上 不 够 简洁 ， 也 因此 我 
们 接 下 来 将 介绍 由 Airbnb 所 设计 的 Enzyme 进 行 React 测试 。 


使 用 Enzyme 3 3t 47 X 


Enzyme 优势 是 在 于 针对 官方 测试 工具 封装 成 了 类 似 jQuery API 的 选取 元 素 的 方 
式 。 根 据 官方 网 站 介绍 Enzyme 将 更 容易 地 去 操作 选取 React Component : 


Enzyme is a JavaScript Testing utility for React that makes it easier to assert, 
manipulate, and traverse your React Components’ output. Enzyme is 
unopinionated regarding which test runner or assertion library you use, and 
should be compatible with all major test runners and assertion libraries out 
there. 


在 Enzyme 中 选取 元 素 使 用 find() 


component.find('.className'); // 使 用 class 选取 
component.find('#idName'); // 使 用 id 选取 
component.find('hi'); // 使 用 元 素 选 取 


接 下 来 我 们 介绍 Enzyme 三 个 主要 的 API 方法 : 
1. Shallow Rendering 


shallow 方法 事实 上 就 是 官方 测试 工具 的 shallow rendering 封装 。 同 样 是 只 泻 
染 第 一 层 ， 不 泻 染 所 有 子 组 件 。 


import React from 'react'; 

import TestUtils from 'react-addons-test-utils'; 
import { expect } from 'chai'; 

import { shallow } from 'enzyme'; 

import Main from '../../src/components/Main'; 


describe('Enzyme Shallow Rendering', () => { 
it('Main title should be Todos', () => ( 
const main = shallow(<Main />); 
// 判断 hi 文字 是 否 如 预期 
expect(main.find('hi1').text()).to.equal('Todos'); 
3); 
3); 


2. Static Rendering 


render 方法 是 将 React 24474 3 ma? AHO HTML. 字 串 ， 并 利用 Cheerio 函数 
È (这 点 和 shallow 不 同 ) 分 析 其 结构 返回 对 象 。 虽 然 底层 是 不 同 的 处 理 引 擎 
但 使 用 上 API 封装 起 来 和 Shallow 却 是 一 致 的 。 需 要 注意 的 是 Static 


Rendering 非 只 演 染 一 层 ， 需 要 注意 是 否 需 要 mock props 传递 。 


import React from 'react'; 
import TestUtils from 'react-addons-test-utils'; 
import { expect } from 'chai'; 


import { render } from 'enzyme'; 


import Main from '../../src/components/Main'; 


describe('Enzyme Staic Rendering', () => ( 
di Main) title=shoulld be Todos m O =-= 


const todos = [( id: 0, text: 'reading'), { id: 1, text 


"coding rl: 


const main = render(<Main todos={todos} />); 
expect (main. find('h1').text()).to.equal('Todos'); 


DO 


3): 


3. Full Rendering 


mount 方法 React 2E £F Z& AHS DOM 节点 。 同 样 因 为 牵涉 到 DOM 也 要 使 用 
JSDOM ° 


import React from 'react'; 

import TestUtils from 'react-addons-test-utils'; 

import { expect } from 'chai'; 

import { findDOMNode } from 'react-dom'; 

import { mount } from 'enzyme'; 

import TodoHeader from '../../src/components/TodoHeader ' ; 


describe('Enzyme Mount', () => { 
JE(CCCIcKoBUEEOD D> 


let todoHeaderDOM = mount(«TodoHeader />); 

// 取得 button 并 模拟 click 

let button - todoHeaderDOM.find('button').at(0); 
button.simulate('click'); 

// 检查 prop(key) 是 否 正确 
expect(button.prop('disabled')).to.equal(true); 


+); 


}); 


最 后 我 们 可 以 在 react-addons-test-utils-example 文件 夹 下 执行 


$ npm test 


若 一 切 顺 利 就 可 以 看 到 M] a3 过 的 消息 上 | 
Enzyme Mount 
4 Click Button (44ms) 


Enzyme Shallow Rendering 
4 Main title should be Todos 


Enzyme Staic Rendering 
4 Main title should be Todos 


Simulate Event 
4 When click the button, it will be toggle 


Shallow Rendering 
4 Main title should be hi 


Shallow Props Rendering 
4 TodoList props check 


6 passing (279ms) 


事实 上 Enzyme 还 提供 更 多 的 API 可 以 使 用 ， 若 是 读者 想 了 解 更 多 Enzyme API 可 
以 参考 官方 文件 。 


E 


Cx 


/ 


以 上 我 们 从 Mocha + Chai 的 使 用 方式 介绍 到 React 官方 提供 的 测试 工具 和 

Airbnb 所 设计 的 Enzyme ， eae | 试 代码 已 经 有 初步 的 了 解 ， 若 尚未 掌握 
的 读者 不 妨 跟著 上 面 的 范例 再 重新 走 过 一 遍 ， 接 著 我 们 要 进 到 最 后 的 
GraphQL/Relay 的 介绍 。 
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附录 四 、GraphQL/Relay 初 体验 


Vs 


GraphQL 的 出 现 主要 是 为 了 要 解决 Web/Mobile 端 不 断 增加 的 API 请 求 所 衍生 的 问 
题 。 由 于 RESTful 最 大 的 功能 在 于 很 有 效 的 前 后 端 分 离 和 建立 stateless 请 求 ， 然 
而 RESTful API 的 资源 设计 上 比较 偏向 单方 面 的 互动 ， 若 是 有 闭 复 杂 资 源 间 的 关联 
就 会 出 现 请 求 次 数 过 多 ， 遇 到 不 少 的 瓶颈 。 


GraphQL 初 体验 


GraphQL is a data query language and runtime designed and used at 
Facebook to request and deliver data to mobile and web apps since 2012. 


根据 GraphQL 官方 网 站 的 定义 ，GraphQL 是 一 个 数据 查询 语言 和 runtime » Query 
responses 是 由 client 所 定义 决定 ， 而 非 server 端 ， 且 只 会 回 传 client 所 定义 的 内 
容 。 此 外 ，GraphQL 是 强 型 别 (strong type) 且 可 以 容易 使 用 阶层 

(hierarchical) 和 处 理 复杂 的 数据 关连 性 ， 并 更 容易 让 前 端 工程 师 和 产品 工程 师 定 
SL Schema 来 使 用 ， 赋 子 前 端 对 于 数据 的 制定 能 力 。 


GraphQL 主要 由 以 下 组 件 构成 : 


1. 类 别 系统 (Type System) 

2. 查询 语言 (Query Language) :在 Operations 中 query 只 读 取 数 据 而 
mutation 写 入 操作 

3. 执行 语意 (Execution Semantics ) 

4. M 5 E it (Static Validation ) 

5. # (Type Introspection ) 


一 般 RESTful 在 取 用 资源 时 会 对 应 到 HTTP. 中 
GET ^ POST ^ DELETE ^ PUT 等 方法 ， 并 以 URL 对 应 的 方式 去 取得 资源 ， 
例如 : 


取得 id 为 3500401 的 使 用 者 数据 : 
GET /users/3500401 


以 下 则 是 GraphQL 定义 的 query 范例 ， 定 义 式 (declarative) 的 方式 比 起 
RESTful 感觉 起 来 相对 直观 : 


t 
user(id: 3500401) ( 
id, 
name, 
isViewerFriend, 
profilePicture(size: 50) { 
uri, 
width, 
height 
} 
} 
} 


接收 到 GraphQL query 后 server 回 传 结 果 : 


"user" = { 
“iG! 5004017 
"name": "Jing Chen", 


"isViewerFriend": true, 
7prOrilePictunes. “1 
"um mt tp://someunl-cdny pie. par, 


"width": 50, 
"height": 50 
} 
} 
} 
实战 演练 


在 GraphQL 中 有 取得 数据 Query、 更 改 数 据 Mutation 等 操作 。 以 下 我 们 先 介 绍 如 
何 建立 GraphQL Server 并 取得 数据 。 


1. 环境 建 置 接 下 来 我 们 将 动手 建立 GraphQL 的 简单 范例 ， 让 大 家 感受 一 下 
GraphQL 的 特性 ， 在 这 之 前 我 们 需要 先 安装 以 下 套件 建立 好 环境 : 


i. graphq! : GraphQL 的 JavaScript 实践 . 

ii. express : Node web framework. 

iii. express-graphql, an express middleware that exposes a GraphQL 
server. 


$ npm init 
$ npm install graphql express express-graphql --save 


2. Data 格式 设计 


以 下 是 data.json 


vps ise eT 
di 
"name": "Dan" 
ty 
M 
cuo Epis 
"name": "Marie" 
ty 
ye ee | 
e iro hia eec nee 
"name": "Jessie" 
} 


3. Server 设计 


// 引入 函数 库 

import graphql from 'graphql'; 

import graphqlHTTP from 'express-graphgl'; 
import express from 'express'; 


// 引入 data 
const data - require('./data.json'); 
// 定义 User type 的 两 个 子 fields: "id^ fe ^name^ T$: xxH2 AI 
对 于 GraphQL 非常 重要 
const userType = new graphql.GraphQLObjectType( 1 
name: 'User', 
fields: { 
id: { type: graphgl.GraphQLString }, 
name: { type: graphql.GraphQLString }, 
} 
}); 


const schema = new graphql.GraphQLSchema({ 
query: new graphql.GraphQLObjectType({ 
name: 'Query', 
fields: { 


user: { 
// 使 用 上 面 定义 的 userType 
type: userType, 
// 定义 所 接受 的 user 参数 
args: { 
id: { type: graphql.GraphQLString } 
3 
// 当 传 入 参数 后 resolve 如 何 处 理 回 传 data 
resolve: function (_, args) { 
return data[args.id]; 


} 
}) 
}); 


// 启动 graphql server 
express() 
.use('/graphql', graphqlHTTP(( schema: schema, pretty: tr 


ue })) 
.listen(3000); 


console.log('GraphQL server running on http://localhost:300 
0/graphq1'); 


node index.js 


这 个 时 候 我 们 可 以 打开 浏览 器 输 


入 localhost:3000/graphql. ^» WFAA 
任何 Query， 目 前 会 出 现 以 下 画面 : 


// 20160908211131 
// http://localhost :3000/graphql ?query={user(id:%221%22) {name}} 


~ | "data" 
"user" 
"hame": "Dan" 


4. Query 设计 


3 GraphQL 指令 为 : 


user(id: "1") { 
name 


将 回 传 数据 : 


{ 
"data": { 
"user": { 
"name": "Dan" 
} 
} 
} 


在 了 解 了 数据 和 Query 设计 后 ， 这 个 时 候 我 们 可 以 打开 浏览 器 输入 (当然 也 可 
以 通过 终端 机 curl 的 方式 执行 ) : http://localhost:3000/graphql? 
query={user(id:"1"){name}} ， 此 时 server 会 根据 GET 的 数据 回 传 : 


// 20160908211840 
// http://localhost :3000/graphql 


"errors" 


"message": "Must provide query string." 


到 这 里 ， 你 已 经 完成 了 最 简单 的 GraphQL Server 设计 了 ， 若 你 遇 到 编码 问题 ， 可 
以 尝试 使 用 JavaScript 中 的 encodeURI 去 进行 转 码 。 也 可 以 自己 尝试 不 同 的 
Schema 和 Query， 感 受 一 下 GraphQL 的 特性 。 事 实 上 ，GraphQL 还 拥有 许多 有 
趣 的 特色 ， 例 如 : Fragment、 指 令 、Promise 等 ， 若 读者 对 于 GraphQL 有 兴趣 可 
以 进一步 参考 GraphQL 官网 。 


Relay 初 体验 


Relay is a new framework from Facebook that provides data-fetching 
functionality for React applications. 


在 体验 完 GraphQL 后 ， 我 们 要 来 聊 聊 Relay。Relay Facebook 为 了 满足 大 型 应 
用 程序 开发 所 建构 的 框架 ， 主 要 用 于 处 理 React 应 用 层 (Application) 的 数据 互动 
框架 。 在 Relay 中 可 以 让 每 个 Component 通过 GraphQL 的 整合 处 理 可 以 精确 地 
向 Component props 提供 取得 的 数据 ， 并 在 client side 存放 一 份 所 有 数据 的 store 
ATE Eo 


整个 Relay 架构 流程 图 : 


一 般 来 说 要 使 用 Relay 必须 先 准备 好 以 下 三 项 工具 : 





1. A GraphQL Schema 


o graphql-js 
o graphdl-relay-js 
2. AGraphQL Server 


o express 
o express-graphgql 
3. Relay 


o network layer : Relay 通过 network layer 44 GraphQL 给 server 


接 下 来 我 们 来 通过 React 官方 上 的 范例 来 让 大 家 感受 一 下 Relay 的 特性 。 上 面 我 们 
有 提 过 : 在 Relay 中 可 以 让 每 个 Component 通过 GraphQL 的 整合 处 理 可 以 更 精 
确 地 向 Component props 提供 取得 的 数据 ， 并 在 client side 存放 一 份 所 有 数据 的 
store 当 作 暂 存 。 所 以 ， 首 先 我 们 先 建立 每 个 Component 和 GraphQL/Relay 的 对 
San 


// 建立 Tea Component’ A this.props.tea 取得 数据 
class Tea extends React.Component { 
render() { 
var {name, steepingTime} = this.props.tea; 
return ( 
<li key={name}> 
{name} (<em>{steepingTime} min</em>) 


</li> 


): 


// 使 用 Relay.createContainer 建立 数据 沟通 窗口 
Tea = Relay.createContainer(Tea, { 
fragments: { 
tea: () => Relay.QL' 
fragment on Tea { 
name, 
steepingTime, 


class TeaStore extends React.Component { 
render() { 
return <ul> 
{this.props.store.teas.map( 
tea => <Tea tea={tea} /> 
)} 


</ul>; 


} 


TeaStore = Relay.createContainer(TeaStore, { 
fragments: { 
store: () => Relay.QL` 
fragment on Store { 
teas { ${Tea.getFragment('tea')} }, 


// Route 设计 
class TeaHomeRoute extends Relay.Route { 
static routeName - 'Home'; 
static queries - ( 
store: (Component) -» Relay.QL' 


query TeaStoreQuery { 
store { ${Component.getFragment('store')} }, 


e 


ReactDOM. render ( 
«Relay.RootContainer 
Component={TeaStore} 
route={new TeaHomeRoute( ) } 
f 
mountNode 


); 


GraphQL Schema 和 store 建立 : 


// WABRE 

import { 
GraphQLInt, 
GraphQLList, 
GraphQLObjectType, 
GraphQLSchema, 
GraphQLString, 

} from 'graphql'; 


// client side ## store’ GraphQL Server reponse 会 更 新 store” 


通过 props 传递 给 Component 
const STORE = { 
teas: [ 
{name: 'Earl Grey Blue Star', steepingTime: 5}, 
{name: 'Milk Oolong', steepingTime: 3}, 


(name: 'Gunpowder Golden Temple', steepingTime: 3}, 


(name: 'Assam Hatimara', steepingTime: 5), 
(name: 'Bancha', steepingTime: 2}, 


(name: 'Ceylon New Vithanakande', steepingTime: 5), 


(name: 'Golden Tip Yunnan', steepingTime: 5}, 


(name: 'Jasmine Phoenix Pearls', steepingTime: 3}, 


(name: 'Kenya Milima', steepingTime: 5}, 


(name: 'Pu Erh First Grade', steepingTime: 


(name: 'Sencha Makoto', steepingTime: 2}, 


]; 
Po 


// 设计 GraphQL Type 
var TeaType = new GraphQLObjectType( 1 
name: 'Tea', 
fields: () => ({ 
name: (type: GraphQLString}, 
steepingTime: (type: GraphQLInt}, 
3) 
3); 


// 将 Tea 整合 进来 
var StoreType = new GraphQLObjectType({ 
name: 'Store', 
fields: () -» (( 
teas: (type: new GraphQLList(TeaType)), 
3) 
+); 


// 输出 GraphQL Schema 
export default new GraphQLSchema( { 
query: new GraphQLObjectType( 1 
name: 'Query', 
fields: () => (4 
store: ( 
type: StoreType, 
resolve: () -» STORE, 
ty 
3) 
3) 
3); 


RTA hg ? 我 们 只 LN fib iE X RR 受 一 下 Relay 的 简 间 单 范例 


项 目 会 是 个 很 好 的 开始 。 


4}, 


若 大 家 想 进 一 
Relay 的 优势 ， 已 经 帮 你 准备 好 GraphQL Server » transpiler 的 Relay Starter Kit 


步 体 验 


E 


Cs 
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React 生态 系 中 ， 除 了 前 端 View 的 部 份 有 单 新 性 的 创新 外 ，GraphQL 更 是 对 于 数 
据 取 得 的 全 新 思路 。 虽 然 GraphQL 和 Relay 已 经 成 为 开源 项 目 ， 但 技术 上 仍 持续 
演进 ， 若 需要 在 团队 production 上 导入 仍 可 以 持续 观察 。 到 这 边 ， 若 是 一 路 从 第 一 

章 看 到 这 里 的 读者 站 的 要 给 自己 一 个 热烈 掌声 了 ， 我 知道 对 于 初学 者 来 说 React & 
大 且 有 许多 的 新 的 观念 需要 消化 ， 但 如 同 笔者 在 最 初时 所 提 到 的 ， 学 习 React 重要 
的 是 通过 这 个 生态 系 去 学 习 现代 化 网 页 开发 的 工具 和 方法 以 及 思路 ， 成 为 更 好 的 开 
发 者 。 根 据 前 端 摩尔 定律 ， 每 半年 就 有 一 次 大 变革 ， 但 基本 Web 问题 和 观念 依然 
不 变 ， 大 家 一 起 加 油 啦 pb 若 有 任何 问题 都 欢迎 来 信 给 笔者 或 是 发 issue ， 当 然 
PR is welcome :) 
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